twitter-bootstrap 导航栏中的中心窗体
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14780865/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Center form in navbar
提问by Feriscool
What I'm trying to do is have the search box in the center of the navbar (image here). How would I do that?
我想要做的是在导航栏的中心放置搜索框（此处为图片）。我该怎么做？
HTML:
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>
I'm using the default CSS that comes with Bootstrap.
我正在使用 Bootstrap 附带的默认 CSS。
回答by Andy Holmes
wrap the form element within its own div and give it a class or an id, then create a custom line of code to center it, example:
将表单元素包装在它自己的 div 中并为其指定一个类或一个 id，然后创建一个自定义代码行使其居中，例如：
HTML:
HTML：
<div id="search">
*form code here*
</div>
CSS:
CSS：
#search { width: 200px; margin: auto; }
回答by RandomUs1r
if you need to override built in CSS in an application, use !important like so:
如果您需要在应用程序中覆盖内置 CSS，请使用 !important ，如下所示：
<div style="margin: 0px auto !important;"></div>
Or, put it in your css class.
或者，把它放在你的 css 类中。
回答by randalv
Struggled with this for a long time too, for Bootstrap 3. I finally found this solution which worked perfectly for me: Bootstrap NavBar with left, center and right aligned itemsJust added a class to the inside my navbar around my search box, with the css definition in Skelly's answer.
对于 Bootstrap 3，我也为此苦苦挣扎了很长时间。我终于找到了这个对我来说非常有用的解决方案： Bootstrap NavBar 带有左对齐、居中对齐和右对齐的项目刚刚在我的搜索框周围的导航栏中添加了一个类，使用Skelly 的回答中的 css 定义。
I did then have to apply text-align:left to some of elements in my form (e.g. typeahead suggestions attached to my search form).
然后我必须将 text-align:left 应用于表单中的某些元素（例如，附加到我的搜索表单的预先输入建议）。
