如何左對齊導航欄文本？

我正在嘗試用BS4（beta2）構建一個小頁面。如何左對齊導航欄文本？

<nav id="TOP" class="navbar navbar-light"> 
<span id="banner-logo" class="navbar-brand"> 
<span class="fa fa-bath fa-5x"></span> 
</span> 
<span id="banner-heading" class="navbar-text"><h1> 
Wonderful page-title 
</h1> 
</span> 
</nav>

（還有一個小提琴here）

在導航的建設不知怎的，我失去了一些東西：我想給#banner-heading - 元素爲左對齊，旁邊的圖標。爲什麼這不起作用？

編輯：我注意到，它的作品，如果我把資產淨值爲 - 但BS-例子都不做，所以一定是別的東西是錯誤的...

來源

2017-10-21 MBaas

我沒有工作有很多，但我不相信你正在做的是正確的引導前4測試版，只是簡單瀏覽了一下文件here，

導航欄的格式爲：

<nav class="navbar navbar-light bg-light"> 
<a class="navbar-brand" href="#"> 
    <span class="fa fa-bath fa-3x"></span> 
    Wonderful page-title 
</a> 
</nav>

，你可以，但你的菜單並說nt在一個容器中。

<div class="container"> 
    <div class="row"> 
    <div class="col-md-3"> 
     My little menu 
    </div> 
    <div class="col-md-9"> 
     Main content area, 9 cols wide 
    </div> 
    </div> 
</div>

見fiddle

編輯

要@ Mbaas的評論，如果你想要的圖標是鏈接而不是文本，使用Li和周圍放上圖標錨標記。

<nav class="navbar navbar-light bg-light"> 
    <li class="navbar-brand"> 
    <a href="#"> 
     <span class="fa fa-bath fa-3x"></span> 
    </a> 
     Wonderful page-title 
    </li> 
</nav>

您可以通過應用CSS像刪除鏈接的下劃線懸停：

.navbar-brand a{ 
    text-decoration: none; 
}

要使文本大的h1標籤，你可以把它放在一個跨度類和應用CSS它喜歡：

<span class="bold-text"> 
     Wonderful page-title 
</span>

而對於bold-text的CSS可能是這樣的：

.bold-text{ 
    font-weight:bold; 
    font-size: 40px; 
}

fiddle

來源

2017-10-24 09:06:26 Laiman

是的，但是如果我只想鏈接圖標，而不是頁面標題呢？只要我從「a」標籤中取出「精彩的頁面標題」，我就會再次遇到同樣的問題！ – MBaas

@MBaas是的，這是正確的，看我更新的答案。 – Laiman

是的，這工作。但在我的問題中，我在'h1'標籤中獲得了該標題......並且又破壞了格式化！ :(小提琴：https：//jsfiddle.net/mbaas/utfv82u6/ – MBaas

如何左對齊導航欄文本？

回答

相關問題