Question

我已经看过类似的问题但不会帮助我......

我使用Bootstrap 3（不少）我想让菜单尽快崩溃，就像999px左右一样

这是我使用的基本代码：

  <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" width="93" height="102" alt="German Magic Farm Logo" longdesc="index.html">
        <img class="hidden-xs" src="img/german-magic-logo-sm-bars.png" width="110" height="133" alt="German Magic Farm Logo" 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

由于我无法找到一种方法来移动整个导航栏中的文字＆＃39;在大约1000的视口上向右边多一点我认为可能更容易改变崩溃的制动点...

任何想法？

Answer 1

这个主题导致了@Skelly对接受的答案的评论的解决方案。 Change bootstrap navbar collapse breakpoint without using LESS

注释附加Bootply，其中覆盖了所有必需的css类/媒体查询。只需将css中的媒体查询从1200px更改为1000px，或者在您的情况下更有意义。

Answer 2

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

public class testBean {
   // your code...

   public void deselectAll() {
        setYourSelectionList(null);
      //  OR
        setYourSelectionArray(null);
   }
}

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

Answer 3

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

bootstrap3使菜单更快崩溃

3 个答案: