我想在Boostrap中使用.navbar-search类,但是我想将它与.pull-right一起使用。然而,.pull-right似乎不会影响搜索栏,因为.navbar-search有一个float:left,并且似乎覆盖了.navbar-search。Bootstrap .pull-right不会影响.navbar-search
有没有一种明显的方式来使它与Bootstrap一起工作,还是我需要添加自定义CSS来进行浮点右键搜索?
HTML(从HAML在Rails应用程序生成的)
<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设置?该类应该默认工作,因为它已经包含在bootstrap中。 – 2012-04-04 01:20:11
我增加了更多的HTML。我也认为那个.pull-right应该覆盖.navbar-search。 – vfilby 2012-04-04 01:54:20
刚刚测试过你的代码,它的工作正常,http://jsfiddle.net/N6vGZ/4/,什么是不工作? – 2012-04-04 02:19:43