導航欄中的中心表格

我想要做的是在導航欄中心搜索框（image here）。我會怎麼做？導航欄中的中心表格

HTML：

<div class="navbar navbar-inverse navbar-fixed-top"> 
    <div class="navbar-inner"> 
    <div class="container"> 
     <a class="brand" href="#">logo</a> 
     <div class="nav-collapse collapse"> 
     <form class="navbar-form pull-right"> 
      <div class="input-append"> 
      <input class="span4" id="appendedInputButton" type="text" placeholder="Search..."> 
      <button class="btn" type="button">Search</button> 
      </div> 
     </form> 
     </div><!--/.nav-collapse --> 
    </div> 
    </div> 
</div>

我用自帶的引導程序的默認CSS。

來源

2013-02-08 Feriscool

[你有什麼嘗試？]（http://whathaveyoutried.com/） – 2013-02-08 20:37:47

看到這個...

.nav-collapse{ 
    margin-right: 50%; 
}

Example

來源

2013-02-08 20:53:39

我剛試過。這是幾乎中心。這是幾個像素的權利（我猜是因爲徽標）？ [IMAGE HERE]（http://i.imgur.com/1dtr3tI.png） – Feriscool 2013-02-08 20:59:19

@Feriscool現在看例子... – 2013-02-08 21:12:24

它一直沒有改變任何東西：/ – Feriscool 2013-02-08 22:06:26

，如果你需要重寫建於CSS在應用程序中，使用像這樣重要！

<div style="margin: 0px auto !important;"></div>

或者，把它放在你的CSS類。

來源

2013-02-08 20:38:26 RandomUs1r

我不知道我明白。 – Feriscool 2013-02-08 20:40:01

包裹形式元件內包括其自身的div，並給它一個類或一個id，然後創建的代碼的自定義線使其居中，例如：

HTML：

<div id="search"> 
*form code here* 
</div>

CSS：

#search { width: 200px; margin: auto; }

來源

2013-02-08 20:42:50

掙扎與此很長一段時間太長，自舉3. 我終於找到了這個解決方案，它完美地工作對我來說： Bootstrap NavBar with left, center and right aligned items 只是增加了一個類的導航欄我裏面在我的搜索框，在Skelly的答案中的css定義。

我不得不將text-align：left應用到表單中的某些元素（例如，附加到我的搜索表單中的typeahead建議）。

來源

2014-03-03 21:53:25 randalv

導航欄中的中心表格

回答

相關問題