修改twitter bootstrap navbar

我一直試圖修改twitter bootstrap導航欄，此刻所有鏈接都對齊到左側，當我真正想要的是讓他們中心。修改twitter bootstrap navbar

在不同的職位，我讀了您使用此

.tabs, .pills { 
    margin: 0 auto; 
    padding: 0; 
    width: 100px; 
}

但是，這並沒有爲我

我需要什麼，在CSS更改爲做到這一點的工作，我明白我把自舉中的修改後的css和覆蓋。

任何幫助表示讚賞

這是我的標記

佈局/應用

<div class="navbar navbar-fixed-top"> 
    <div class="navbar-inner"> 
    <div class="container-fluid"> 
     <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </a> 

    <a class="brand">Newbridges</a> 

    <% if user_signed_in? %> 
    <div class="nav-collapse"> 
     <ul class="nav "> 
     <%= render "shared/navbarlogin" %> 
    </div> 

    <% else%> 
    <div class="nav-collapse"> 
     <ul class="nav"> 

     <%= render "shared/navbar" %> 
    </div> 
    <% end %>

我也試過這個

.nav > li { 
    float: none; 
    display: inline-block; 
    *display: inline; 
    /* ie7 fix */ 
    zoom: 1; 
    /* hasLayout ie7 trigger */ 
} 
.nav { 
    text-align: center; 
}

來源

2012-05-12 Richlewis

（自舉3.1.1測試）你能製作一個[jsFiddle演示]（http://jsfiddle.net/），顯示你到目前爲止的Twitter Bootstrap導航欄？ – thirtydot

你的意思是[this]（http://jsfiddle.net/U8HGz/2/show/）？之前回答了這樣的問題，發現[here]（http：// stackoverflow。COM /問題/ 9421966 /怎麼辦，我中心最Twitter的引導的選項卡 - 上的頁/ 9422253＃9422253）。 –

感謝您的意見，似乎沒有爲我工作，雖然 – Richlewis

您可以通過設置您的中心導航菜單您的菜單項爲display:inline-block而不是float:left li柯這樣：

.navbar .nav, 
.navbar .nav > li { 
    float:none; 
    display:inline-block; 
    *display:inline; /* ie7 fix */ 
    *zoom:1; /* hasLayout ie7 trigger */ 
    vertical-align: top; 
} 

.navbar-inner { 
    text-align:center; 
}

雖然我建議你創建自己的類的目標，你希望你的中心導航欄菜單中，這樣你就不會打擾引導默認值，惹你可能在其他導航節你的頁面。你能做到像這樣：

^{通知的.center類導航欄容器}

<div class="navbar navbar-fixed-top center"> 
    <div class="navbar-inner"> 
     .... 
    </div> 
</div>

然後你就可以針對.center類，像這樣：

.center.navbar .nav, 
.center.navbar .nav > li { 
    float:none; 
    display:inline-block; 
    *display:inline; /* ie7 fix */ 
    *zoom:1; /* hasLayout ie7 trigger */ 
    vertical-align: top; 
} 

.center .navbar-inner { 
    text-align:center; 
}

演示：http://jsfiddle.net/C7LWm/show/

編輯：忘了重新調整子菜單項的左邊，這是修復：

CSS

.center .dropdown-menu { 
    text-align: left; 
}

演示：http://jsfiddle.net/C7LWm/1/show/

來源

2012-05-12 23:53:26

非常感謝您的幫助質疑， – Richlewis

工作得很好，謝謝！ – Richlewis

你真棒會嘗試了這一點，現在 – StevenTsooo

阿和也，如果你希望在雙方的空間（「項目名稱」前和「Dropdown」之後）是對稱的，請添加以下內容：

.navbar .nav, .navbar .nav > ul 
{ 
    float: right 
}

此外，似乎使用以下（自Bootstra p v2.0。4）不居中導航欄還是：

<div class="navbar navbar-fixed-top center"> 
     <div class="navbar-inner"> 
     <div class="container-fluid"> 
     . 
     . 
     . 
     </div> 
     </div> 
</div>

您需要更改到

<div class="navbar navbar-fixed-top center"> 
     <div class="navbar-inner"> 
     <div class="container"> 
     . 
     . 
     . 
     </div> 
     </div> 
</div>

（由安德烈斯llich提供的樣品中提取;只是他錯過了變化）

現在它適用於我...

來源

2012-07-24 14:59:47 Gabriel

我知道這是一箇舊的帖子，但我也注意到這個職位在我的谷歌搜索幾次。我想實際上將記錄直接設置爲在twitter引導中對齊導航欄，因爲當前接受的方法沒有錯，但不需要，因爲twitter引導程序支持這一點。

實際上有更好的方法來做這個，然後手動修改它。這將通過使用已經在twitter引導中的內容來減少代碼。因爲我們正在創建的導航欄，視口將其設置爲一個固定的位置上，然後通過反相顏色主題交換了白到黑

<div class="navbar navbar-fixed-top navbar-inverse"> 
    <div class="navbar-inner"> 
     <div class="container"> 
      <a class="brand" href="#">RIZEN</a> 
      <ul class="nav"> 
       <li class="active"><a href="/">Home</a></li> 
       <li><a href="#">Events</a></li> 
       <li><a href="#">Links</a></li> 
       <li><a href="#">Gallery</a></li> 
       <li><a href="#">Contact</a></li> 
       <li><a href="#">Forums</a></li> 
      </ul> 
     </div> 
    </div> 
</div>

擊穿
第一行是非常簡單的。

接下來我們將分配或多或少說明的navbar內部，如果可能的話，設置最小高度，這是實際顏色樣式來自的位置，而不是上面的行。

這是因爲我們的導航欄掉落流體佈局只是一個容器去的重要線。這設置了一個固定的邊距，該邊距將內部內容與屏幕對齊。這是通過具有自動邊距並設置寬度來完成的。

這種方法將做你想要的，因爲你實際上保存kb在頭部請求通過不添加額外的代碼和正確使用腳手架與twitter bootstrap和沒有額外的代碼膨脹。我在自己的項目中使用了這種方法，並繼續在當前項目中使用它。修改TBS（twitter bootstrap）的危險是你失去了代碼一致性，如果將來你想改變某些東西，你必須記住你已經改變了什麼，否則事情可能無法按預期工作。

希望這會有所幫助。此外，如果你想要一個工作示例，只需看看twitter bootstrap的主頁就可以了。

來源

2013-02-24 00:31:02

這對我有用，但我不得不在容器上設置寬度以使其工作。 – Sherlock

根本不需要設置寬度。此外，這應該是爲Bootstrap 2，以防萬一您使用3，但它應該是向前兼容，我相信 –

上面的居中css僅適用於未摺疊的導航欄。

雖然在導航欄摺疊時這並不理想。默認情況下，每個摺疊的導航欄項目都位於其自己的行上，如下拉菜單。但上面的CSS試圖將所有摺疊的項目推到同一行上，這並不理想。

我用包裹在媒體查詢定心CSS的這個小修復，所以它被觸發僅在未塌縮的導航欄：

@media (min-width: 768px) { 
    .center.navbar .nav, 
    .center.navbar .nav > li { 
     float:none; 
     display:inline-block; 
     *display:inline; /* ie7 fix */ 
     *zoom:1; /* hasLayout ie7 trigger */ 
     vertical-align: top; 
    } 
    .center .navbar-inner { 
     text-align:center; 
    } 
}

來源

2015-01-27 17:15:27 terrymorse

修改twitter bootstrap navbar

回答

相關問題