bootstrap3使菜单更快折叠[重复]

Posted 2023-03-06

【中文标题】bootstrap3使菜单更快折叠[重复]

【英文标题】：bootstrap3 make menu collapse sooner [duplicate]

【发布时间】：2015-10-14 05:23:03

【问题描述】：

我看到过类似的问题，但不是对我有帮助的问题..

我正在使用 Bootstrap 3（没有更少）我希望菜单像 999 像素左右那样更快地折叠

这是我正在使用的基本代码：

  <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        <a class="navbar-brand" href="index.html">
    <!--  <span class="hidden-md hidden-lg hidden-sm">German Magic Farm</span> -->
          <img class="visible-xs" src="img/german-magic-farm-logo-sm.png"    longdesc="index.html">
        <img class="hidden-xs" src="img/german-magic-logo-sm-bars.png"    longdesc="index.html"></a>
        
        </div>
        <!-- Collect the nav links, forms, and other content for toggling -->
       <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li>
                    <a href="index.html">Home</a>
                </li>
                <li>
                   <a href="meet-pam-bauer.html">Meet Pam Bauer</a>
                </li>
                <li>
                    <a href="services.html">Services</a>
                </li>
                   <li>
                    <a href="sales.html">Sales</a>
                </li>
                 <li>
                    <a href="clinics.html">Clinics</a>
                </li>
                 <li>
                    <a href="photo-gallery.html">Photo Gallery</a>
                </li>
                 <li>
                    <a href="contact.html"> Directions & Contact</a>
                </li>
            </ul>
        </div>
        <!-- /.navbar-collapse -->
    </div>
    <!-- /.container -->
</nav>

我的测试站点在这里：Test Site

由于我无法找到一种方法将“整个导航栏”中的文本在大约 1000 的视口上向右移动一点，我想也许改变崩溃的制动点可能会更容易...

有什么想法吗？

【参考方案1】：

此线程导致@Skelly 对已接受答案的评论中的解决方案。 Change bootstrap navbar collapse breakpoint without using LESS

评论附加了一个Bootply，其中所有必要的css类/媒体查询都被覆盖了。只需将 css 中的媒体查询从 1200px 更改为 1000px 或在您的情况下最有意义。

【讨论】：

哦，我确实看到了那篇帖子，但后面有人说它不适用于 Bootstrap 3。这就是我问的原因......所以现在我不知道该怎么办...... ??

【参考方案2】：

如果要将导航栏向右移动，则应进行以下更改：

@media (max-width: 1000px)
.navbar-nav
margin-left:20%;

否则，在库马尔先生的评论中提到的另一个问题中回答了断点。

【讨论】：

谢谢你有没有办法让折叠菜单中的文本居中？

您只需让 navbar-nav 具有属性 text-align:center; ，否则，如果您希望文本保持原样并以某种方式居中，您可以将 margin-left 增加到 40 % ，我刚试了一下，它看起来很适合您的网站。不过，您不必在媒体查询下编写它。但是如果您想添加 @media (max-width: 768px)，就可以了工作也是如此..

哦，天哪，谢谢，是的，我完全知道我可以使用 text-align:center，但我今天通过几种不同的方式 ftp-ed（这是一个动词，哈哈）无济于事，非常令人沮丧，因为它在开发工具方面效果很好......非常感谢您的帮助，我会在早上尝试;-)

很高兴我能帮上忙。 :)

【参考方案3】：

添加.navbar-right <ul class="nav navbar-nav navbar-right">