Bootstrap form-group align

Question

我目前正在使用Bootstrap 3处理用户界面。我有一个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：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;