更改摺疊導航欄的寬度

Question

我搜索並搜索，但沒有答案由於某種原因得到期望的結果。 目前我的導航欄在768px處摺疊，但是我希望它在1200px處摺疊，相反，我已經在CSS文件中更改了@media以反映這一點，但它似乎並沒有產生任何效果，我在地球上做錯了什麼？

我試過按照說明在這裏解釋：Change bootstrap navbar collapse breakpoint without using LESS 但仍然沒有。

我的網站是http://www.yourtechgeek.co.uk/

希望有人能幫助我真的抓我的頭了。

TIA

Answer 1

看看您的網站，它被定義爲768像素。在文件bootstrap.min.css或您自己的css文件中更改爲以下內容。

@media (min-width: 1200px) 
    .container { 
    width: 750px; 
} 

Answer 2

改變導航欄斷點，例如用於移動漢堡包出現在1200像素，請參閱本示例代碼段下面

或看到小提琴>fiddle

@media (max-width: 1200px) { 
 
    .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; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> 
 
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
    <div class="navbar navbar-default"> 
 
     <div class="navbar-header"> 
 
      <a class="navbar-brand" href="#">Bootstrap 3</a> 
 
     </div> 
 
     <div class="navbar-collapse collapse"> 
 
      <ul class="nav navbar-nav"> 
 
       <li class="dropdown active"> 
 
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Getting started <b class="caret"></b></a> 
 
        <ul class="dropdown-menu"> 
 
         <li><a href="http://getbootstrap.com/getting-started/#download">Download Bootstrap</a></li> 
 
         <li class="divider"></li> 
 
         <li class="dropdown-header">Examples</li> 
 
         <li><a href="http://getbootstrap.com/getting-started/#template">Basic template</a></li> 
 
         <li><a href="http://getbootstrap.com/examples/starter-template/">Starter template</a></li> 
 
         <li><a href="http://getbootstrap.com/examples/grid/">Grids</a></li> 
 
         <li><a href="http://getbootstrap.com/examples/jumbotron/">Jumbotron</a></li> 
 
         <li><a href="http://getbootstrap.com/examples/navbar/">Navbar</a></li> 
 
         <li><a href="http://getbootstrap.com/examples/signin/">Sign-in page</a></li> 
 
         <li><a href="http://getbootstrap.com/examples/sticky-footer/">Sticky footer</a></li> 
 
         <li><a href="http://getbootstrap.com/examples/offcanvas/">Offcanvas</a></li> 
 
         <li><a href="http://getbootstrap.com/examples/carousel/">Carousel</a></li> 
 
         <li><a href="http://getbootstrap.com/examples/theme/">Theme</a></li>       
 
         <li class="divider"></li> 
 
         <li class="dropdown-header">Compatibility</li> 
 
         <li><a href="http://getbootstrap.com/getting-started/#migration">Migrating from 2.x to 3.0</a></li> 
 
         <li><a href="http://getbootstrap.com/getting-started/#browsers">Browser support</a></li> 
 
         <li><a href="http://getbootstrap.com/getting-started/#third-parties">Third party support</a></li> 
 
        </ul> 
 
       </li> 
 
       <li><a href="http://getbootstrap.com/css">CSS</a></li> 
 
       <li><a href="http://getbootstrap.com/components">Components</a></li> 
 
       <li><a href="http://getbootstrap.com/javascript">JavaScript</a></li> 
 
      </ul> 
 
      <ul class="nav navbar-nav navbar-right"> 
 
       <li class="active"><a href="http://getbootstrap.com/customize">Customize</a></li> 
 
      </ul> 
 
     </div> 
 
    </div> 
 
    
 
    <div class="jumbotron"> 
 
     <h1>Twitter Bootstrap 3.0</h1> 
 
     <p class="lead">Starter template with CSS and JS included.</p> 
 
     <p><a class="btn btn-lg btn-primary" href="#fork">Fork this fiddle</a></p> 
 
     </div> 
 
</div>