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