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>
あなたは完全なnavbar htmlセットアップを投稿できますか?そのクラスはすでにブートストラップに含まれているので、デフォルトで動作するはずです。 –
さらにHTMLを追加しました。また、.pull-rightは.navbar-searchをオーバーライドする必要があるとも考えました。 – vfilby
はあなたのコードとその動作上の罰金でクラスをテストしました。http://jsfiddle.net/N6vGZ/4/、正確に動作しないのは何ですか? –