CSS Bootstrap .pull-right 不影响 .navbar-search
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10003686/
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
Bootstrap .pull-right doesn't affect .navbar-search
提问by vfilby
I would like to use the .navbar-search class in Boostrap, but I would like to use it with .pull-right. However .pull-right doesn't seem to affect the search bar as .navbar-search has a float: left in it and that seems to override .navbar-search.
我想在 Boostrap 中使用 .navbar-search 类，但我想将它与 .pull-right 一起使用。然而 .pull-right 似乎不会影响搜索栏，因为 .navbar-search 有一个 float: left 在里面，这似乎覆盖了 .navbar-search。
Is there an obvious way to make it work with Bootstrap or do I need to just add custom css for a float right nab search?
是否有明显的方法可以使其与 Bootstrap 一起使用，还是我只需要为浮动右导航搜索添加自定义 css？
HTML (Generated from HAML in a rails app)
HTML（从 Rails 应用程序中的 HAML 生成）
<form accept-charset="UTF-8" action="/search" class="navbar-search pull-right" method="get">
<div style="margin:0;padding:0;display:inline">
<input name="utf8" type="hidden" value="?">
</div>
<input class="search-query" id="q" name="q" placeholder="Search" type="text">
</form>
Generated CSS:
生成的 CSS：
.navbar-search {
position: relative;
float: left;
margin-top: 6px;
margin-bottom: 0;
}
bootstrap.css:236
.pull-right {
float: right;
}
bootstrap.css:525
Full Nav (Generated from HAML):
完整导航（从 HAML 生成）：
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
...
<form accept-charset="UTF-8" action="/search" class="pull-right navbar-search" method="get"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="?"></div>
<input class="search-query" id="q" name="q" placeholder="Search" type="text">
</form>
</div>
</div>
</div>
回答by Andres Ilich
After testing out the class with the most current bootstrap.csssheet, we found that the .pull-rightclass was not available under the older version of the bootstrap so updating that fixed the issue.
在使用最新的工作bootstrap.css表测试该类后，我们发现.pull-right该类在旧版本的引导程序下不可用，因此更新解决了该问题。
Demoof class being used with the latest bootstrap sheet.
与最新引导表一起使用的类的演示。
回答by David Nguyen
Add !important to .pull-right
将 !important 添加到 .pull-right
.pull-right {
float: right !important;
}
