修改宽度以在导航菜单上包装导航栏[重复]

Question

这个问题已经在这里有了答案：

• 更改引导导航栏崩溃断点，而无需使用LESS 16答案

我用引导程序做了一个下拉菜单，但是我需要将它包裹在991px，而不是默认的767px处。 我做了一些修改，所以我不能（或一定不要浪费时间）再次下载修改后的引导程序。

这是html代码：

<nav class="navbar navbar-default menuu" data-spy="affix" data-offset-top="170">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span> 
      </button>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class="active m"><a class="menun" href="#">Noticies</a></li>
        <li class="m"><a class="menun" href="#">Agenda</a></li>
        <li class="m"><a class="menui" href="#">e-Butllet&iacute;</a></li> 

        <li class="m"><a class="menun" href="#">Entitats</a></li>
        <li class="m dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Galeria
            <b class="caret"></b></a>
            <ul class="dropdown-menu">
                <li><a href="#">Fotos</a></li>
                <li><a href="#">V&iacute;deos</a></li>
            </ul>
        </li> 
        <li class="m"><a class="menun" href="#">Col&middot;laboren</a></li>
        <li class="m"><a class="menun" href="#">Convocat&ograve;ries</a></li>
        <li class="m"><a class="menun" href="#">Sac solidari</a></li> 
        <li class="m dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Contacte
            <b class="caret"></b></a>
            <ul class="dropdown-menu">
                <li><a href="#">Dades de contacte</a></li>
                <li><a href="#">e-mail</a></li>
                <li><a href="#">Facebook</a></li>
                <li><a href="#">Twitter</a></li>
            </ul>
        </li> 
        <li>
            <div id="custom-search-input">
                <div class="input-group col-md-12">
                    <input type="text" class="  search-query form-control" placeholder="Buscar" />
                    <span class="input-group-btn">
                        <button class="btn btn-warning" type="button">
                            <span class=" glyphicon glyphicon-search"></span>
                        </button>
                    </span>
                </div>
            </div>
        </li>
        <li>
        <div id="custom-lang-select">
                <div class="input-group col-md-12">
                    <select class="lang-query form-control" placeholder="idioma">
                    <span class="input-group-btn">
                        <option> catala </option>
                        <option> castella </option>
                        <option> swagili </option>
                    </span>
                    </select>
                </div>
        </div>
        </li>       
      </ul>
    </div>
  </div>
</nav>

有没有任何“简单”的方法可以使它以我想要的宽度包裹？ 也许有一个jQuery脚本？ 我需要它，因为我在调整大小时遇到​​了困难，有些项目掉了下来：

谢谢！

Answer 1

您将不得不更改bootstrap navbar breakpoint，已经有解决此链接的方法了

在Bootstrap 3.3.2中更改Navbar断点

Answer 2

尝试添加自定义媒体查询

喜欢

@media(max-width:991px){
   .navbar-toggle{display:block;}
   .collapse{display:none;}
}

Answer 3

这是在Bootstrap的3.3.6上正常运行的最终结果（并且在3.3.7上也必须正常运行）。 感谢@Mohit Arora和@Matthias。

/* Modify max-with to change breakpoint */
 @media (max-width: 991px) {
    .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;}
    .navbar-nav .open .dropdown-menu{position:static; float:none; width:auto; margin-top:0; background-color:transparent; border:0; -webkit-box-shadow:none; box-shadow:none;}}

干杯!