更改折叠导航栏的宽度

Question

我已经搜索和搜索，但由于某种原因，没有一个答案具有预期的结果。 目前我的导航栏在 768 像素处折叠，但是我希望它在 1200 像素处折叠，我已经相应地更改了 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

要更改导航栏断点，例如移动汉堡出现在 1200px，请参见下面的示例 sn-p

或者看小提琴>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>