html - Bootstrap 3 中心导航栏切换类

Question

我是 Bootstrap3 的新手，我已经在网站上搜索了可能的答案，但此时我没有找到好的解决方案。我正在尝试创建一个全宽 navbar-toggle，左右两侧都有正常的 15px 填充，但由于某种原因，当我尝试使用 margin: 0 auto 强制 CSS 时! important 它仍然不起作用。如何创建全宽导航栏？

HTML:

  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#collapsed-navigation">
        <span class="sr-only">Toggle navigation</span>
        <span class="glyphicon glyphicon-align-justify"></span>
        <span class="navmenu">Navigation</span>
  </button>


<div class="container">
  <div class="collapse navbar-collapse" id="collapsed-navigation">
    <form class="navbar-form navbar-right" role="search">

      <div class="form-group">
        <input type="text" class="form-control" placeholder="Search">
      </div><!-- end .form-group -->
      <button type="submit" class="btn btn-default">Foo</button>
    </form> 

    <ul class="nav navbar-nav navbar-left">
      <li class="active"><a href="#">Foobar1</a></li>
      <li><a href="#">Foobar2</a></li>
      <li><a href="#">Foobar3</a></li>
      <li><a href="#">Foobar4</a></li>
    </ul>
  </div><!-- /.navbar-collapse -->

</div><!-- end .container -->

CSS:

.navbar-toggle {
    position: relative;
    width: 100%;
    margin: 0 auto !important;
}

Answer 1

如果您所说的是它在对齐方面略有偏差，如下所示:

那是因为你需要覆盖bootstrap默认给它的float和margin-right

.navbar-toggle {
  width: 100%;
  float: none;
  margin-right: 0;
}

Demo