Bootstrap .pull-right 不影响 .navbar-search答案

【问题标题】：Bootstrap .pull-right doesn't affect .navbar-searchBootstrap .pull-right 不影响 .navbar-search
【发布时间】：2012-04-17 17:20:06
【问题描述】：

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

是否有一种明显的方法可以使其与 Bootstrap 一起使用，或者我是否需要为浮动右导航搜索添加自定义 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>

【问题讨论】：

您可以发布您的完整导航栏 html 设置吗？该类应该默认工作，因为它已经包含在引导程序中。
我添加了更多 HTML。我还认为 .pull-right 应该覆盖 .navbar-search。
刚刚用你的代码测试了这个类，它的工作正常，jsfiddle.net/N6vGZ/4，到底是什么不工作？
看了你链接的例子后，我决定直接链接到 github bootstrap.css 文件，它可以工作。包含 bootstrap css 的 gem 必须使用较旧或损坏的版本。如果您添加答案，我会为您标记。
发现了！，这是让很多人头疼的问题之一，直到您发现问题很容易解决。发布了答案。

标签： css twitter-bootstrap

【解决方案1】：

在使用最新的 bootstrap.css 表测试类后，我们发现 .pull-right 类在旧版本的引导程序下不可用，因此更新解决了该问题。

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

【讨论】：

【解决方案2】：

将 !important 添加到 .pull-right

.pull-right {
  float: right !important;
}

【讨论】：