ブートストラップフォームグループのアラインメント

Question

私は現在、ブートストラップ3を使用しているUIで作業しています。私はを持っています。をh3に揃えたいと思います。

マイHTML：

<div class="row"> 
    <nav class="col-sm-3"> 
     <div class="form-group"> 
     <span class="status" aria-hidden="true"></span> 
     <h3>Project Title</h3> 
     </div> 
    </nav> 
    <div class="col-sm-9"> 
     ... 
    </div> 
</div> 

マイCSS：どういうわけか

.status { 
    width:20px; 
    height:20px; 
    border-radius:50%; 
    background-color: yellow; 
} 

、スパンが画面に表示されることはありません。希望のレイアウトは次のようになります。

• タイトル

は、あなたがこの問題を解決する方法を知っていますか？

感謝:)

Answer 1

あなただけ浮く追加することができます.statusクラスに左：

.status { 
 
    width:20px; 
 
    height:20px; 
 
    border-radius:50%; 
 
    background-color: yellow; 
 
    float: left; 
 
    margin-right: 10px; 
 
}

<div class="row"> 
 
    <nav class="col-sm-3"> 
 
     <div class="form-group"> 
 
     <span class="status" aria-hidden="true"></span> 
 
     <h3>Project Title</h3> 
 
     </div> 
 
    </nav> 
 
    <div class="col-sm-9"> 
 
     ... 
 
    </div> 
 
</div>