Bootstrap導航條太長

Question

這是我的簡單導航欄。 問題是我有太多的菜單項和低於〜840px的寬度菜單項放錯位置。

該圖像示出在3米寬度的情況： 寬度：850像素 寬度：767px 寬度：769px

Obiouvsly第二個是該問題。

如何更改導航欄的「斷點」並增加顯示button.navbar-toggle的寬度（而不會破壞整個站點的設計）？

<nav class="navbar navbar-default navbar-custom navbar-fixed-top no-print"> 
<div class="container-fluid"> 
    <div class="navbar-header page-scroll"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" 
       data-target="#bs-example-navbar-collapse-1"> 
      <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="#/">mysite</a> 
    </div> 
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
     <ul class="nav navbar-nav navbar-right"> 
      <li> 
       <a href="home">Home</a> 
      </li> 
      <li> 
       <a href="item1">item1</a> 
      </li> 
      <li> 
       <a href="item2">item2</a> 
      </li> 
      <li> 
       <a href="item3">item3</a> 
      </li> 
      <li> 
       <a href="item4">item4</a> 
      </li> 
      <li class="dropdown"> 
       <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">item5</a> 
       <ul class="dropdown-menu"> 
        <li> 
         <a href="item5.1"><i class="fa fa-search" aria-hidden="true"></i> item5.1</a> 
        </li> 
        <li> 
         <a href="item5.2"><i class="fa fa-th-list" aria-hidden="true"></i> item5.2</a> 
        </li> 
       </ul> 
      </li> 
     </ul> 
    </div> 
</div> 

Answer 1

正如mentionned本網站https://coderwall.com/p/wpjw4w/change-the-bootstrap-navbar-breakpoint上（感謝對筆者） 你應該改變引導斷點的大小，這是引導3.1個例子：

@media (max-width: 850px) { 
    .navbar-header { 
     float: none; 
    } 
    .navbar-left,.navbar-right { 
     float: none !important; 
    } 
    .navbar-toggle { 
     display: block; 
    } 
    .navbar-collapse { 
     border-top: 1px solid transparent; 
     box-shadow: inset 0 1px 0 rgba(255,255,255,0.1); 
    } 
    .navbar-fixed-top { 
     top: 0; 
     border-width: 0 0 1px; 
    } 
    .navbar-collapse.collapse { 
     display: none!important; 
    } 
    .navbar-nav { 
     float: none!important; 
     margin-top: 7.5px; 
    } 
    .navbar-nav>li { 
     float: none; 
    } 
    .navbar-nav>li>a { 
     padding-top: 10px; 
     padding-bottom: 10px; 
    } 
    .collapse.in{ 
     display:block !important; 
    } 
}