2012-04-04 12 views
6

Boostrapで.navbar-searchクラスを使用したいと思いますが、それを.pull-rightで使用したいと思います。しかし、.navbar-searchにはfloat:が残っており、.navbar-searchをオーバーライドするように見えるため、.pull-rightは検索バーに影響しないようです。ブートストラップの.pull-rightは.navbar-searchに影響しません

Bootstrapで動作させるための明白な方法はありますか?またはfloat right nab searchにカスタムCSSを追加する必要がありますか? (レールのアプリでHAMLから生成される)

HTML

<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:(HAMLから生成)

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

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

完全ナビ!

<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> 
+0

あなたは完全なnavbar htmlセットアップを投稿できますか?そのクラスはすでにブートストラップに含まれているので、デフォルトで動作するはずです。 –

+0

さらにHTMLを追加しました。また、.pull-rightは.navbar-searchをオーバーライドする必要があるとも考えました。 – vfilby

+0

はあなたのコードとその動作上の罰金でクラスをテストしました。http://jsfiddle.net/N6vGZ/4/、正確に動作しないのは何ですか? –

答えて

8

最新のbootstrap.cssシートのクラスをテストした後、.pull-rightクラスが以前のバージョンのブートストラップでは使用できないことが判明したため、この問題を修正しました。

Demoは最新のブートストラップシートで使用されています。

-3

追加することが重要.pull-right

.pull-right { 
    float: right !important; 
} 
関連する問題