Navbar Bootstrap bir öğenin hamburger glyphicon dışında olmasına izin veriyor

Bir parça kod uygulamam var. Tarayıcı penceresi boyutu (genişlik yolları) azaldığında, menü sekmeleri tıklanabilir bir Hamburger gliyopasına girer.Navbar Bootstrap bir öğenin hamburger glyphicon dışında olmasına izin veriyor

Bu özelliği korumak istiyorum, ancak tarayıcı boyut küçüldüğünde glifikonun dışına bir gezinme sekmesi ekleyin.

Bu nasıl önyükleme kullanarak mümkündür? Ben ekleme girişiminde başka

<div class="navbar"> <ul class="nav navbar-nav"> <li> </li> </ul> </div>

ben yanyana iki div'leri yüzen düzeltilebilir mümkün olabileceğini düşündüm ancak bu fakir biçimlendirme yol açtı "mainNavBar" teşhis etti birine öncesinde, ama ben Bunu yapmak için kod çalıştıramadı.

Kodum aşağıda.

<!DOCTYPE HTML> 
 

 
<html> 
 

 
<head> 
 

 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 

 
</head> 
 

 
<body> 
 

 
    <!-- Navigation bar --> 
 
    <nav class="navbar navbar-custom navbar-fixed-top"> 
 

 
    <div class="container-fluid"> 
 

 
     <!-- Logo --> 
 

 
     <div class="navbar-header"> 
 

 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mainNavBar"> 
 

 
      <span class="glyphicon glyphicon glyphicon-menu-hamburger"></span> 
 

 
     </button> 
 

 
     <a href="../homepage.html" class="navbar-brand"> Markets</a> 
 

 
     </div> 
 

 
     <!-- menu items --> 
 

 
     <div class="collapse navbar-collapse" id="mainNavBar"> 
 

 
     <ul class="nav navbar-nav navbar-right"> 
 

 
      <li> <a href="../aboutus.html">About Us</a> 
 
      </li> 
 
      <li> <a href="../news.html">News</a> 
 
      </li> 
 
      <li> <a href="../analysis.html">Analysis</a> 
 
      </li> 
 
      <li> <a href="../randomarticle.html">Random Article</a> 
 
      </li> 
 
      <li> <a href="../contactus.html">Contact Us</a> 
 

 
      </li> 
 

 
     </div> 
 
    </nav> 
 
    <!-- End Navigation Bar --> 
 

 
</body> 
 

 
</html>

kaynak

2016-04-06 Prodigy

Bootply: http://www.bootply.com/Vky1AGlU5F

CSS:

.still_on_view{ 
    float: right; 
}

HTML:

<nav class="navbar navbar-custom navbar-fixed-top"> 

    <div class="container-fluid"> 

     <!-- Logo --> 

     <div class="navbar-header"> 

     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mainNavBar"> 

      <span class="glyphicon glyphicon glyphicon-menu-hamburger"></span> 

     </button> 

     <ul class="still_on_view nav navbar-nav"> 

      <li> <a href="../aboutus.html">About Usb2</a> 
      </ul> 
     <a href="../homepage.html" class="navbar-brand"> Markets</a> 

     </div> 
     <div> 

     </div> 

     <!-- menu items --> 

     <div class="collapse navbar-collapse" id="mainNavBar"> 

     <ul class="nav navbar-nav navbar-right"> 

      <li> <a href="../aboutus.html">About Us</a> 
      </li> 
      <li> <a href="../news.html">News</a> 
      </li> 
      <li> <a href="../analysis.html">Analysis</a> 
      </li> 
      <li> <a href="../randomarticle.html">Random Article</a> 
      </li> 
      <li> <a href="../contactus.html">Contact Us</a> 

      </li> 

     </div> 
    </nav>

kaynak

2016-04-06 21:16:34 pbenard

Navbar Bootstrap bir öğenin hamburger glyphicon dışında olmasına izin veriyor

cevap

İlgili konular