4

我想要做的是在导航栏的中心放置搜索框（图片在这里）。我该怎么做？

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。

4

4 回答 4

2

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

HTML：

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

CSS：

#search { width: 200px; margin: auto; }
于 2013-02-08T20:42:50.013 回答
1

如果您需要覆盖应用程序中的内置 CSS，请使用 !important，如下所示：

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

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

于 2013-02-08T20:38:26.247 回答
0

看到这个...

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

例子

于 2013-02-08T20:53:39.310 回答
0

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

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

于 2014-03-03T21:53:25.893 回答