html引導 - navbar響應問題

Question

我正在嘗試爲我的腳本創建一個新設計，但是我遇到了一個問題。

當導航欄位於普通電腦尺寸時，導航欄看起來很正常，但是當我將其作爲平板電腦/手機尺寸運行時，該按鈕位於導航欄內的鏈接下。
http://prntscr.com/61ovfk

所以這裏的問題是，只有當它的窗口周圍的普通電腦上的一半大小。當它變小時，那很好。

有沒有辦法解決這個問題？

這是我的代碼，

<nav class="navbar navbar-inverse navbar-fixed-top"> 
     <div class="container"> 
       <div class="navbar-header"> 
         <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
           <span class="sr-only">Toggle navigation</span> 
           <span class="icon-bar"></span> 
           <span class="icon-bar"></span> 
           <span class="icon-bar"></span> 
         </button> 
         <a class="navbar-brand" href="#">companyName</a> 
       </div> 
       <div id="navbar" class="navbar-collapse collapse"> 
         <ul class="nav navbar-nav"> 
           <li><a href="order.php">Order Services</a></li> 
           <li><a href="announcements.php">Announcements</a></li> 
           <li><a href="knowledgebase.php">Knowledgebase</a></li> 
           <li><a href="support.php">Support</a></li> 
           <li><a href="contact.php">Contact Us</a></li> 
         </ul> 
         <ul class="nav navbar-nav navbar-right"> 
           <li> 
             <p class="navbar-btn"> 
               <a class="btn btn-primary" href="login.php"> 
                 <span class="glyphicon glyphicon-user" aria-hidden="true"></span> Manage Account 
               </a> 
             </p> 
           </li> 
         </ul> 
       </div><!--/.nav-collapse --> 
     </div> 
</nav> 

謝謝！

Answer 1

您需要自定義Bootstrap CSS，或使用媒體查詢來覆蓋導航欄的斷點。

@media (max-width: 992px) { 
    .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; 
    } 
    /* since 3.1.0 */ 
    .navbar-collapse.collapse.in { 
     display: block!important; 
    } 
    .collapsing { 
     overflow: hidden!important; 
    } 
} 

http://bootply.com/dwzfF4CeFd

Answer 2

由於有在導航欄中太多的菜單選項，在縮放當它擊中較低@media突破點，他們得到倒塌，由於它周圍的空間有限。 在下面的媒體查詢斷點內寫下適當的css以獲得更低的屏幕分辨率。

/*========== Mobile First Method ==========*/ 

/* Custom, iPhone Retina */ 
@media only screen and (min-width : 320px) { 

} 

/* Extra Small Devices, Phones */ 
@media only screen and (min-width : 480px) { 

} 

/* Small Devices, Tablets */ 
@media only screen and (min-width : 768px) { 

} 

/* Medium Devices, Desktops */ 
@media only screen and (min-width : 992px) { 

} 

我會修正它像這樣;同時將其中三個選項轉換爲下拉框，以允許我在更小的設備上留出更多空間。這三個菜單選項將隱藏在小型設備上。

Working fiddle

<li class="dropdown visible-sm visible-xs"> <a aria-expanded="false" role="button" data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown <span class="caret"></span></a> 

        <ul role="menu" class="dropdown-menu"> 
         <li><a href="#">Action</a> 
         </li> 
         <li><a href="#">Another action</a> 
         </li> 
         <li><a href="#">Something else here</a> 
         </li> 
         <li class="divider"></li> 
         <li class="dropdown-header">Nav header</li> 
         <li><a href="#">Separated link</a> 
         </li> 
         <li><a href="#">One more separated link</a> 
         </li> 
        </ul> 
       </li> 
       <li class="hidden-sm hidden-xs"><a href="knowledgebase.php">Knowledgebase</a> 

       </li> 
       <li class="hidden-sm hidden-xs"><a href="support.php">Support</a> 

       </li> 
       <li class="hidden-sm hidden-xs"><a href="contact.php">Contact Us</a> 

       </li> 

欲瞭解更多請this出來。 祝你好運！