2016-05-09 38 views
1

イムを変更した後、水平方向に延びる崩壊:ブートストラップは、ナビゲーションバーは、次のようにブートストラップナビゲーションバーを使用してブレークポイント

<div id="custom-nav" class="navbar navbar-inverse navbar-fixed-top"> 
    <div class="container-fluid"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span>       
      </button> 
      <a href="#"><img style="margin-top:5px" src="images/logo.png" /></a> 
     </div> 
     <div class="collapse navbar-collapse" id="myNavbar"> 
      <ul class="nav navbar-nav navbar-right"> 
       <li><a class="active" href="#">ANASAYFA</a></li> 
       <li><a href="page1.html">KURUMSAL</a></li> 
       <li><a href="#">UYGULAMALAR</a></li> 
       <li><a href="#">ÇÖZÜMLER</a></li> 
       <li><a href="#">ÜRÜNLER</a></li> 
       <li><a href="#">REFERANSLAR</a></li> 
       <li><a href="#">İLETİŞİM</a></li> 
      </ul> 
     </div> 
    </div> 
</div> 

私は、次のコードを使用して、私のナビゲーションバーに900pxの崩壊ブレークポイントを変更しなければなりませんでした。デフォルトでは768pxでした。

@media (min-width: 768px) and (max-width: 899px) { 
    .navbar-collapse.collapse { 
     display: none !important; 
    } 
    .navbar-collapse.collapse.in { 
     display: block !important; 
    } 
    .navbar-header .collapse, .navbar-toggle { 
     display:block !important; 
    } 
    .navbar-header { 
     float: none; 
    } 
} 

折りたたまれたナビゲーションバーを延長すると、900pxから768pxの間で、項目が水平に表示されます。

768px以下のように縦にアイテムを表示するにはどうすればいいですか?

+0

あなたが最後に中括弧が欠落していますあなたのCSS – RasmusGlenvig

答えて

0

は、私はそれがよく見えるだけでなく、それらを縦に揃える作る作るためにいくつかのより多くの変更を追加したいくつかのより多くのブートストラップ機能

を上書きしなければならなかった。:

@media (min-width: 768px) and (max-width: 899px) { 
     .navbar-collapse.collapse { 
      display: none !important; 
     } 

     .navbar-collapse.collapse.in { 
      display: block !important; 
     } 

     .navbar-header .collapse, .navbar-toggle { 
      display: block !important; 
     } 

     .navbar-header { 
      float: none; 
     } 

     /* 

      The changes start from here: 

     */ 

     .navbar-right { 
      float: none !important; 
     } 

     .navbar-nav > li { 
      float: none; 
     } 

     .navbar-nav > li > a { 
      padding-top: 10px; 
      padding-bottom: 10px; 
     } 

     .navbar-collapse { 
      -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1); 
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1); 
     } 

     .container-fluid > .navbar-collapse { 
      margin-right: -15px; 
      margin-left: -15px; 
     } 

     .container-fluid > .navbar-header { 
      margin-right: -15px; 
      margin-left: -15px; 
     } 
    } 
+0

あなたは天使です。本当にありがとうございます:)あまりにも悪い私はあなたに+ repに十分な担当者を持っていない:( – John

関連する問題