css - Bootstrap .pull-right 不影响 .navbar-search

Question

我想在 Boostrap 中使用 .navbar-search 类，但我想将它与 .pull-right 一起使用。然而 .pull-right 似乎并不影响搜索栏，因为 .navbar-search 有一个 float: left 在里面，它似乎覆盖了 .navbar-search。

有没有明显的方法让它与 Bootstrap 一起工作，或者我是否需要为 float 右侧导航搜索添加自定义 css？

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>

生成的 CSS:

.navbar-search {
  position: relative;
  float: left;
  margin-top: 6px;
  margin-bottom: 0;
}
bootstrap.css:236

.pull-right {
  float: right;
}
bootstrap.css:525

完整导航(从 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>

Answer 1

在用最新的bootstrap.css sheet测试了类之后，我们发现.pull-right类在老版本的bootstrap下是不可用的所以更新解决了这个问题。

Demo与最新的 Bootstrap 表一起使用的类。