navbar-textを左揃えにするには？

Question

私は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 -elementしたいのですが左揃えされるように、アイコンの横に。なぜそれは働いていないのですか？

EDIT：私はそれは私がにNAVを置けば働くことに気づいた - 私は仕事していないが、BS-例すべてがそれをしないので、他の何かが間違っている必要があります...

Answer 1

前にブートストラップ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> 

とすることができますが、あなたのメニューとconteコンテナ内の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> 

は、Mbaasのコメントを@にfiddle

EDIT

を参照してください。

<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を適用することによって、リンクの下線ホバーを削除することができます：あなたはクラスでスパンでそれを置くとCSSを適用することができ、H1タグなどのテキストを大きくする

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

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

をそして bold-textためのCSSのようなものが考えられます：それに好き

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

fiddle