如何將Twitter-Bootstrap 3導航條鏈接中心？

如何將按鈕置於jsFiddle中，以便按鈕在導航欄內部和外部均勻間隔並居中放置？如何將Twitter-Bootstrap 3導航條鏈接中心？

我嘗試了多種不同的方法，如

display:inline-block;margin:0 auto; text-align:center;

但我無法得到它的工作。

如果你可以給一點解釋，而不是僅僅修復CSS，因爲我想學習，所以我不必再回到這裏。

編輯：

就像它們是如何在這裏集中^。

來源

2013-08-07 ProEvilz

引導3有一個新的nav-justified類爲此目的。沒有額外的CSS要求：

<div class="container"> 
    <h3 class="text-muted">Project name</h3> 
    <ul class="nav nav-justified"> 
    <li class="active"><a href="#">Home</a></li> 
    <li><a href="#">Projects</a></li> 
    <li><a href="#">Services</a></li> 
    <li><a href="#">Downloads</a></li> 
    <li><a href="#">About</a></li> 
    <li><a href="#">Contact</a></li> 
    </ul> 
</div>

演示：http://bootply.com/72519

另見：Bootstrap NavBar with left, center and right aligned items

來源

2013-08-07 11:24:00 ZimSystem

這是一個很好的建議，但是如果你採取完美在這個小提琴中我遇到了矛盾的問題。你有什麼建議嗎？ http://jsfiddle.net/MgcDU/6582/ – ProEvilz

同樣在這裏，class =「nav navbar-nav nav-justified」manu縮小到左邊，對此的任何解決方法？ – rekans

刪除navbar-nav類。 –

添加樣式

.nav{ 
    text-align: center; 
}

這將在中心裏的文字。

Check Fiddle

這些樣式應該是足夠的。您試圖將樣式應用於錯誤的元素。

// This is being applied by the bootstrap 
// Set it to 25px instead of the default 15px 
.navbar{ 
    padding : 0 25px; 
} 

// Gave a width of 110px for each li 
// as the container is following a fixed width format 
li{ 
    width:110px; 
}

來源

2013-08-07 02:32:22

的請求重新檢查我的問題我已編輯它。你錯過了我的觀點，而不是文本，而是按鈕本身。 – ProEvilz

但我沒有看到那些小提琴按鈕 –

@sushhanth 請重新檢查我的小提琴，我已經更新了一些東西，使它更清晰一些。 Prehaphs我錯誤地描述了一些事情。我的意思是導航欄中的鏈接。 – ProEvilz

如何將Twitter-Bootstrap 3導航條鏈接中心？

回答

相關問題