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