özyükleme Navbar'ı ekran

Question

Boostrap Gezinti çubuğu genişliği bağlıdır.

Küçük ekran boyutları için, navbar başlıkları tek bir düğmeyle paketlenir ve büyük ekran boyutları için, yeterli alan varsa başlıklar iyi hizalanır.

tek açılır düğmesini veya eğer hizalanmış tüm başlığı ya sahip bir yolunu veriyor mu: Ara ekran boyutları için

, sonuç aşağıdaki resimde gösterilen gibi çok anestetik olabilir yeterli alan ancak navabar içeriğiyle bir diğerinin üstünde bir konfigürasyon olmasını önlemek için? https://jsfiddle.net/bb61c412/165/

Ve karşılık gelen kod: Burada

yukarıdaki örnekle bir keman olduğunu.

<link rel="stylesheet" type="text/css" href="https://bootswatch.com/bower_components/bootstrap/dist/css/bootstrap.min.css" /> 
 

 
<div class="navbar navbar-default navbar-fixed-top "> 
 
    <div class="container"> 
 
    <div class="navbar-header"> 
 

 
     <a href="#" class="navbar-brand">website</a> 
 
     <button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbar-main"> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     </button> 
 
    </div> 
 
    <div class="navbar-collapse collapse" id="navbar-main"> 
 
     <ul class="nav navbar-nav navbar-right"> 
 
     <li class="active"><a href="#">a long Title1</a> 
 
     </li> 
 
     <li class="active"><a href="#"> a long Title2</a> 
 
     </li> 
 
     <li class="dropdown"> 
 
      <a class="dropdown-toggle" data-toggle="dropdown" href="#" id="themes">a long Title3 <span class="caret"></span></a> 
 
      <ul class="dropdown-menu" aria-labelledby="themes"> 
 
      <li><a href="#"> Item1</a> 
 
      </li> 
 
      <li role="separator" class="divider"></li> 
 
      <li><a href="#"> Item2</a> 
 
      </li> 
 
      <li role="separator" class="divider"></li> 
 
      <li><a href="#"> Item3</a> 
 
      </li> 
 
      </ul> 
 
     </li> 
 
     <li class="active"><a href="#">a long Title4</li> 
 
      <li class="active"><a href="#">a long Title5</li> 
 
      <li class="active"><a href="#">a long Title6</li> 
 
      <li class="active"><a href="#">a long Title7</li> 
 
      <li class="active"><a href="#">a long Title8</li> 
 
      
 

 

 
      </ul> 
 

 
     </div> 
 
     </div> 
 
    </div> 
 

 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
 
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

Answer 1

Varsayılan kırılma noktası için navbar değerlerinin üzerine yazabilirsiniz, böylece çubuğun kendisi gizlenir ve hamburger düğmesi ekran genişliği daha büyük olana kadar görünür kalır.

@media (max-width: 991px) { 
    .navbar-header { 
     float: none; 
    } 
    .navbar-toggle { 
     display: block; 
    } 
    .navbar-collapse { 
     border-top: 1px solid transparent; 
     box-shadow: inset 0 1px 0 rgba(255,255,255,0.1); 
    } 
    .navbar-collapse.collapse { 
     display: none!important; 
    } 
    .navbar-nav { 
     float: none!important; 
     margin: 7.5px -15px; 
    } 
    .navbar-nav>li { 
     float: none; 
    } 
    .navbar-nav>li>a { 
     padding-top: 10px; 
     padding-bottom: 10px; 
    } 
    .navbar-text { 
     float: none; 
     margin: 15px 0; 
    } 
    /* since 3.1.0 */ 
    .navbar-collapse.collapse.in { 
     display: block!important; 
    } 
    .collapsing { 
     overflow: hidden!important; 
    } 
} 

medya sorgusu max-width için 991px değeri değiştirebileceğiniz özel kesme noktası değerdir: Böyle bir şey kullanın. Her şeyden

Updated fiddle

Answer 2

Kendi mobil menü kesme noktası tanımlayabilir. Bootstrap sürümünüzü özelleştirerek yapabilirsiniz. En basit yol http://getbootstrap.com/customize/#grid-system'a gidip @ ızgara-float-breakpoint'i (örneğin, 800px) tanımlamaktır. Böylece, değiştirilen kesme noktasıyla bir Bootstrap dosyası indirebileceksiniz.

Answer 3

Önce, TITLE4 ile başlayan bir çok kapanmamış a etiketleri var. Sonraki adım, navbar için @media-query'un üzerine yazmak için Lloyd Banks bu dava için gerçekten iyi bir çözüm yazdı. bootstrap.css dosyasının altına styles.css dosyanızda ekleyebilirsiniz. Kapattım etiketleri ve yeni kırılma noktası

jsfiddle