修改宽度以在 bootstrap 菜单上包裹导航栏

Question

我用 bootstrap 做了一个下拉菜单，但我需要将它包装在 991px，而不是默认的 767。我做了一些修改，所以我不能（或者不能浪费大量时间）再次下载修改后的 bootstrap.

这是 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>

有什么 "simple" 方法可以让它按我想要的宽度环绕吗？也许使用 jquery 脚本？我需要它，因为我对调整大小产生了丑陋的影响，有些项目掉下来了：

谢谢！

Answer 1

尝试添加自定义媒体查询

喜欢

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

Answer 2

您将不得不更改 bootstrap 导航栏断点，已经有解决此问题的方法，请查看此 link

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

干杯！

修改宽度以在 bootstrap 菜单上包裹导航栏

Modify width to wrap navbar on bootstrap menu

html

css

jquery

twitter-bootstrap

responsive