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

Posted 2023-03-06

【中文标题】修改宽度以在引导菜单上包装导航栏 [重复]

【英文标题】：Modify width to wrap navbar on bootstrap menu [duplicate]

【发布时间】：2017-01-07 20:54:51

【问题描述】：

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

这是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 脚本？ 我需要它，因为我对调整大小有一个丑陋的影响，有些项目会掉下来：

谢谢！

【参考方案1】：

您将不得不更改引导导航栏断点，已经有解决方案，请查看此链接

Change Navbar breakpoint in Bootstrap 3.3.2

【讨论】：

我正在使用 bootstrap 3.3.6，但我还是会检查一下，谢谢！

这会起作用:)

是的，几乎没有什么变化，我在这里将最终结果发布给访问者可以快速找到解决方案，谢谢！ =)

【参考方案2】：

尝试添加自定义媒体查询

喜欢

@media(max-width:991px)
   .navbar-toggledisplay:block;
   .collapsedisplay:none;

【讨论】：

它显示了隐藏的导航栏切换，但不显示功能...

【参考方案3】：

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

/* Modify max-with to change breakpoint */
 @media (max-width: 991px) 
    .navbar-headerfloat:none;
    .navbar-left, .navbar-rightfloat:none !important;
    .navbar-toggledisplay: block;
    .navbar-collapseborder-top:1px solid transparent; box-shadow:inset 0 1px 0 rgba(255,255,255,0.1);
    .navbar-fixed-toptop:0; border-width:0 0 1px;
    .navbar-collapse .collapsedisplay:none !important;
    .navbar-navfloat: none!important; margin-top: 7.5px;
    .navbar-nav > lifloat: none;
    .navbar-nav > li > apadding-top:10px; padding-bottom: 10px;
    .collapse.indisplay:block !important;
    .navbar-nav .open .dropdown-menuposition:static; float:none; width:auto; margin-top:0; background-color:transparent; border:0; -webkit-box-shadow:none; box-shadow:none;

干杯！