ブートストラップナビゲーションバーの表示

Question

ブートストラップナビゲーションバー幅は、それがコンテンツだと画面サイズに依存します。

小さな画面サイズの場合、ナビゲーションバーのタイトルは1つのボタンにまとめられ、大きな画面サイズの場合は十分なスペースがあれば、すべてのタイトルが整列します。中間の画面サイズについては

下図に示すように、結果は非常に麻酔ことができます：それは、単一のドロップダウンボタンまたは場合揃っすべてのタイトルのいずれかを持ってする方法を提供してい

十分なスペースがありますが、一方の上にnavabarコンテンツの設定ができないようにするには？ https://jsfiddle.net/bb61c412/165/

および対応するコード：ここ

上記の例をいじるあります。

<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

デフォルトのブレークポイントの値を上書きして、バー自体が非表示になり、ハンバーガーボタンが画面の幅が大きくなるまで表示されたままにすることができます。メディアクエリーmax-widthため991px値が変更できるカスタムブレークポイント値である

@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; 
    } 
} 

：のようなものを使用してください。

Updated fiddle

Answer 2

独自のモバイルメニューブレークポイントを定義することができます。 Bootstrapのバージョンをカスタマイズすることでそれを行うことができます。最も簡単な方法はhttp://getbootstrap.com/customize/#grid-systemに行き、@ grid-float-breakpoint（たとえば、800px）を定義することです。したがって、ブレークポイントが変更されたBootstrapファイルをダウンロードできるようになります。

Answer 3

まず第一に、あなたはTITLE4で始まる、閉じられていないaタグがたくさんあります。次のステップでは、navbarのために@media-queryを上書きするために、Lloyd Banksはこのケースに対して本当に良い解決法を書いています。 bootstrap.cssファイルの下にリンクされているstyles.cssファイルに含めることができます。私は、閉じタグや新しいブレークポイント

jsfiddle