Bootstrap表單組對齊

Question

我目前正在使用Bootstrap 3在UI上工作。我有一個form-group ，我想將左側的span與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類中僅添加float：left：

 .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>