导航栏中的中心表单

Posted 2023-03-29

【中文标题】导航栏中的中心表单

【英文标题】：Center form in navbar

【发布时间】：2013-01-24 17:00:19

【问题描述】：

我想要做的是将搜索框放在导航栏的中心 (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。

【问题讨论】：

What have you tried?

【参考方案1】：

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

html：

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

CSS：

#search  width: 200px; margin: auto; 

【参考方案2】：

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

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

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

【讨论】：

我不确定我是否理解。

【参考方案3】：

看到这个...

.nav-collapse
    margin-right: 50%;

Example

【讨论】：

我刚试过。它几乎是居中的。右边的像素太多了（我猜是因为徽标）？ IMAGE HERE

这段时间什么都没改变：/

@Feriscool 在导航中看到输入和按钮中心，在空间下看到滚动...

让它工作。出于某种原因，我不得不将其设置为 0% 以保证边距，对吧？

...如果没有大量黑客攻击，我认为这是不可扩展的。

【参考方案4】：

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

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