Bootstrap导航栏按钮和表单对齐

Question

My Bootstrap 3 navbar-btn alignment与navbar-form不一致。在我开始定制CSS之前，我想知道我的问题是否在Bootstrap标记中。

截图

HTML

<nav class="navbar navbar-fixed-top navbar-inverse">
      <div class="container-fluid">
        <div class="row">
          <div class="col-xs-2 col-sm-4">
            <button type="button" class="btn btn-primary navbar-btn" data-toggle="offcanvas"><i class="fa fa-th-list fa-fw"></i></button>
          </div><!-- /.col-xs-2.col-sm-4 -->
          <div class="col-xs-8 col-sm-4">
            <form class="navbar-form" role="search">
              <div class="input-group">
                <input type="search" class="form-control" placeholder="Search">
                <span class="input-group-btn">
                  <button type="button" class="btn btn-primary"><i class="fa fa-search fa-fw"></i></button>
                </span>
              </div><!-- /.input-group -->
            </form>
          </div><!-- /.col-xs-8.col-sm-4 -->
          <div class="col-xs-2 col-sm-4">
            <button type="button" class="btn btn-primary navbar-btn"><i class="fa fa-cog fa-fw"></i></button>
          </div><!-- /.col-xs-2.col-sm-4 -->
        </div><!-- /.row -->
      </div><!-- /.container -->
    </nav><!-- /.navbar -->

Bootlint没有发现任何错误，而且标记是有效的HTML 5。

有什么想法？ 谢谢。

Answer 1

错位是由Twitter Bootstrap中的表单元素提供的默认边距和填充引起的。您可以使用以下代码覆盖小型设备。

@media (max-width: 768px) {
  .navbar-form {
    margin: 0 !important;
    /* Avoid !important and use the custom CSS with higher priority */
    padding-top: 7px !important;
  }
}

<link href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-fixed-top navbar-inverse">
  <div class="container-fluid">
    <div class="row">
      <div class="col-xs-2 col-sm-4">
        <button type="button" class="btn btn-primary navbar-btn" data-toggle="offcanvas"><i class="fa fa-th-list fa-fw"></i>
        </button>
      </div>
      <!-- /.col-xs-2.col-sm-4 -->
      <div class="col-xs-8 col-sm-4">
        <form class="navbar-form" role="search">
          <div class="input-group">
            <input type="search" class="form-control" placeholder="Search">
            <span class="input-group-btn">
                  <button type="button" class="btn btn-primary"><i class="fa fa-search fa-fw"></i></button>
                </span>
          </div>
          <!-- /.input-group -->
        </form>
      </div>
      <!-- /.col-xs-8.col-sm-4 -->
      <div class="col-xs-2 col-sm-4 text-right">
        <button type="button" class="btn btn-primary navbar-btn"><i class="fa fa-cog fa-fw"></i>
        </button>
      </div>
      <!-- /.col-xs-2.col-sm-4 -->
    </div>
    <!-- /.row -->
  </div>
  <!-- /.container -->
</nav>
<!-- /.navbar -->