css - Bootstrap .pull-right は .navbar-search に影響しません

Question

Boostrapで.navbar-searchクラスを使いたいのですが、.pull-rightで使いたいです。ただし、.navbar-search には float: left があり、.navbar-search をオーバーライドしているように見えるため、.pull-right は検索バーに影響を与えないようです。

Bootstrap で動作させる明白な方法はありますか、それとも float 右 nab 検索用にカスタム 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シートでクラスをテストした後、.pull-rightクラスが古いバージョンのブートストラップでは使用できないことがわかったため、更新すると問題が修正されました。

最新のブートストラップ シートで使用されているクラスのデモ。

Answer 2

.pull-right に !important を追加

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