Question

我要做的是将搜索框放在导航栏的中心（image here）。我该怎么做？

HTML：

<div class="navbar navbar-inverse navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container">
      <a class="brand" href="#">logo</a>
      <div class="nav-collapse collapse">
        <form class="navbar-form pull-right">
          <div class="input-append">
            <input class="span4" id="appendedInputButton" type="text" placeholder="Search...">
            <button class="btn" type="button">Search</button>
          </div>
        </form>
      </div><!--/.nav-collapse -->
    </div>
  </div>
</div>

我正在使用Bootstrap附带的默认CSS。

Answer 1

将表单元素包装在自己的div中并为其指定一个类或一个id，然后创建一个自定义代码行来居中它，例如：

HTML：

<div id="search">
*form code here*
</div>

CSS：

#search { width: 200px; margin: auto; }

Answer 2

如果您需要在应用程序中覆盖内置CSS，请使用！important如下：

<div style="margin: 0px auto !important;"></div>

或者，把它放在你的CSS课程中。

Answer 3

看到这个......

.nav-collapse{
    margin-right: 50%;
}

Example

Answer 4

对于Bootstrap 3来说，这也是很长时间的挣扎。我终于找到了适合我的解决方案： Bootstrap NavBar with left, center and right aligned items 刚刚在我的搜索框周围的导航栏中添加了一个类，并在Skelly的答案中使用css定义。

然后我必须将text-align：left应用于表单中的某些元素（例如，附加到我的搜索表单中的预先输入建议）。

导航栏中的中心表单

4 个答案: