html - 更早地折叠 Bootstrap 响应式导航栏

Question

您好，我在我的博主博客中使用带有 Bootstrap 的响应式导航栏。我的问题是，它在到达崩溃点之前堆积得非常丑陋。

我试图覆盖媒体查询，但现在我得到的结果是一个不断触发的导航栏，它覆盖了我的博客，并且找不到触发按钮。

这就是我写的。知道如何让它工作吗？

@media screen (max-width: 1200px){
  .nav-collapse {
    clear: both;
  }
  .nav-collapse .nav {
    float: none;
    margin: 0 0 10px;
  }
  .nav-collapse .nav > li {
    float: none;
  }
  .nav-collapse .nav > li > a {
    margin-bottom: 2px;
  }
  .nav-collapse .nav > .divider-vertical {
    display: none;
  }
  .nav-collapse.in .btn-group {
    padding: 0;
    margin-top: 5px;
  }
  .nav-collapse .dropdown-menu {
    position: static;
    top: auto;
    left: auto;
    display: none;
    float: none;
    max-width: none;
    padding: 0;
    margin: 0 15px;
    background-color: transparent;
    border: none;
    -webkit-border-radius: 0;
       -moz-border-radius: 0;
            border-radius: 0;
    -webkit-box-shadow: none;
       -moz-box-shadow: none;
            box-shadow: none;
  }
  .nav-collapse .open > .dropdown-menu {
    display: block;
  }
  .nav-collapse .nav > li > .dropdown-menu:before,
  .nav-collapse .nav > li > .dropdown-menu:after {
    display: none;
  }
  .nav-collapse .navbar-form,
  .nav-collapse .navbar-search {
    float: none;
    padding: 10px 15px;
    margin: 10px 0;
  }

  .navbar .nav-collapse .nav.pull-right {
    float: none;
    margin-left: 0;
  }
  .nav-collapse,
  .nav-collapse.collapse {
    height: 0;
    overflow: hidden;
  }
  .navbar .btn-navbar {
    display: block;
  }
}

我的导航栏 HTML:

<div class='navbar navbar-fixed-top navbar-inverse'>
  <div class='container'>

    <button class='navbar-toggle pull-left' data-target='.navbar-responsive-collapse' data-toggle='collapse' style='z-index: 25; border:0;' type='button'>
      <span class='icon-bar'/>
      <span class='icon-bar'/>
      <span class='icon-bar'/>
    </button>

    <div class='nav-collapse collapse navbar-responsive-collapse'>
      <ul class='nav navbar-nav'>
              <li><a href='http://bekreatief.blogspot.com'><i class='icon-home'>&#160;    </i>Home</a></li>
              <li class='dropdown'>
                <a class='dropdown-toggle' data-toggle='dropdown' href='#'><i     class='icon-info-sign'>&#160;</i> About <b class='caret'/></a>
                <ul class='dropdown-menu'>
                  <li><a href='http://bekreatief.blogspot.com/p/kreatief.html'><i     class='icon-exclamation'>&#160;</i>KreaTief</a></li>
                  <li><a href='http://bekreatief.blogspot.com/2013/05/faq.html'><i class='icon-question'>&#160;</i>F.A.Q.</a></li>
                </ul>
              </li>
              <li><a href='http://bekreatief.blogspot.com/p/archiv_7.html'><i class='icon-archive'>&#160;</i>Archive</a></li>

              <li class='dropdown'>
                <a class='dropdown-toggle' data-toggle='dropdown' href='#'><i class='icon-edit'>&#160;</i>Tutoriallists <b class='caret'/></a>
                <ul class='dropdown-menu'>
                  <li><a href='http://bekreatief.blogspot.ch/p/code.html'><i class='icon-code'>&#160;</i>Code</a></li>
                  <li><a href='http://bekreatief.blogspot.ch/p/picture.html'><i class='icon-picture'>&#160;</i>Picture</a></li>
                  <li><a href='http://bekreatief.blogspot.com/p/food.html'><i class='icon-food'>&#160;</i>Food</a></li>
                  <li><a href='http://bekreatief.blogspot.ch/p/diy_28.html'><i class='icon-puzzle-piece'>&#160;</i>DIY</a></li>
                  <li><a href='http://bekreatief.blogspot.com/p/other.html'><i class='icon-folder-open'>&#160;</i>Other</a></li>
                  <li class='divider'/>
                  <li class='dropdown-header'>Tutorials By Level</li>
                  <li><a href='http://bekreatief.blogspot.com/search/label/%E2%9C%A4?max-results=10'>&#10020;</a></li>
                  <li><a href='http://bekreatief.blogspot.com/search/label/%E2%9C%A4%E2%9C%A4?max-results=10'>&#10020;&#10020;</a></li>
                  <li><a href='http://bekreatief.blogspot.com/search/label/%E2%9C%A4%E2%9C%A4%E2%9C%A4?max-results=10'>&#10020;&#10020;&#10020;</a></li>
                  <li><a href='http://bekreatief.blogspot.com/search/label/%E2%9C%A4%E2%9C%A4%E2%9C%A4%E2%9C%A4?max-results=10'>&#10020;&#10020;&#10020;&#10020;</a></li>
                  <li><a href='http://bekreatief.blogspot.com/search/label/%E2%9C%A4%E2%9C%A4%E2%9C%A4%E2%9C%A4%E2%9C%A4?max-results=10'>&#10020;&#10020;&#10020;&#10020;&#10020;</a></li>
                </ul>
              </li>
              <li><a href='http://bekreatief.blogspot.com/p/contact_23.html'><i class='icon-comments'>&#160;</i>Contact</a></li>
                <li><a href='http://kreatiefdesigns.blogspot.ch/'><i class='icon-cog'>&#160;</i>KreaTief designs</a></li>

              <li class='dropdown'>
                <a class='dropdown-toggle' data-toggle='dropdown' href='#'><i class='icon-eye-open'>&#160;</i>Follow <b class='caret'/></a>
                <ul class='dropdown-menu'>
                  <li><a href='http://bekreatief.blogspot.ch/feeds/posts/default'><i class='icon-rss-sign'>&#160;</i>RSS</a></li>
                  <li><a href='http://www.bloglovin.com/en/blog/3645972'><i class='icon-plus-sign'>&#160;</i>Bloglovin&#39;</a></li>
                  <li><a href='http://blog-connect.com/a?id=1589905134039127183'><i class='icon-anchor'>&#160;</i>Blogconnect</a></li>
                </ul>
        </li>
              <li class='dropdown'>
                <a class='dropdown-toggle' data-toggle='dropdown' href='#'><i class='icon-paper-clip'>&#160;</i>Find Me <b class='caret'/></a>
                <ul class='dropdown-menu'>
                  <li><a href='http://bloggerlooks.blogspot.ch/'><i class='icon-external-link'>&#160;</i>Blogger Goodies 4 U</a></li>
                  <li><a href='http://mynimi94.deviantart.com/'><i class='icon-external-link'>&#160;</i>DeviantArt</a></li>
                  <li><a href='http://pinterest.com/mkreatief/'><i class='icon-external-link'>&#160;</i>Pinterest</a></li>
                  <li><a href='http://bp.cplove.de/mitglieder/myri/'><i class='icon-external-link'>&#160;</i>Blogosphera</a></li>
                  <li><a href='http://www.hierschreibenwir.de/user/12356/'><i class='icon-external-link'>&#160;</i>HSW</a></li>
                  <li><a href='http://myriamfrisano.blogspot.ch/'><i class='icon-external-link'>&#160;</i>Wortgefängnisarchitektur</a></li>
                </ul>
        </li>
            </ul>
<!-- Search Field -->
<div class='pull-right navbar-search'>
<form action='http://www.google.co.uk/cse' id='cse-search-box'>
<input name='cx' type='hidden' value='014092313708849156193:r0xlcl-xk10'/>
<input name='cof' type='hidden' value='UTF-8'/>
  <input class='form-control search-query span3' id='q' name='q' placeholder='Search' type='text'/>
  <i class='icon-search'/>
</form>
      </div><!-- /search container -->
    </div> <!-- /.nav-collapse -->
  </div> <!-- /.container -->

Answer 1

您可以转到 Bootstrap customization page并在 @navbarCollapseWidth

更改导航栏折叠宽度的变量

这是它在 Bootstrap 2.3.2 页面上的位置的屏幕截图，但您也可以对 Bootstrap 3.0 执行类似的操作。他们只是以不同的方式命名。

您这样做并点击底部的下载按钮，并使用该 bootstrap.css 文件而不是默认文件，一切都应该很好。