Bootstrap .pull-right不会影响.navbar-search

vfi*_*lby 6 css twitter-bootstrap

我想在Boostrap中使用.navbar-search类,但我想将它与.pull-right一起使用.但是.pull-right似乎不会影响搜索栏,因为.navbar-search有一个浮点数:左边,它似乎覆盖.navbar-search.

是否有一种明显的方法可以使它与Bootstrap一起使用,或者我是否只需要为浮动右边的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>
Run Code Online (Sandbox Code Playgroud)

生成的CSS:

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

.pull-right {
  float: right;
}
bootstrap.css:525
Run Code Online (Sandbox Code Playgroud)

完全导航(从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>
Run Code Online (Sandbox Code Playgroud)

And*_*ich 8

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

与最新的引导表一起使用的类的演示.