Bootstrap 3中心导航栏切换类

Question

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

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

IF 你所说的是它在对齐方面略有偏差，如下所示：

然后是因为你需要覆盖浮动和默认情况下Bootstrap给它的边距。

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

<强> Demo