Bootstrap .pull-right不會影響.navbar-search

我想在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>

來源

2012-04-04 vfilby

你可以發佈你的完整導航欄的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

在用最新的bootstrap.css工作表測試出課程後，我們發現.pull-right類在較低版本的引導程序下不可用，因此進行更新以解決問題。

Demo類正在使用最新的引導表。

來源

2012-04-04 12:24:25

-3

添加重要的！ .pull-right

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

來源

2012-04-04 01:17:44

Bootstrap .pull-right不會影響.navbar-search

回答

相關問題