html - Bootstrap : <h4> title not on a new line

Question

我有以下使用 Bootstrap 3 CSS 类的 HTML 代码:

<h4>Profile</h4>
<div class="row form-group col-sm-8">
  <label class="col-sm-2 control-label">Name :</label>
  <div class="col-sm-6">
    myName
  </div>
</div>
<div class="row form-group col-sm-8">
  <label class="col-sm-2 control-label">Email :</label>
  <div class="col-sm-8">
    me@internet.org
  </div>
</div>

<h4>Credits</h4>
<div class="form-group col-sm-8">
  <label class="col-sm-2 control-label">Credits :</label>
  <div class="col-sm-7">
    42
  </div>
</div>

我想要 Credits <h4> title 换行，在前面的字段下面。但是它显示在右上角。

有人可以解释一下原因并帮助我将其显示到正确的位置吗？

CSS fiddle :https://jsfiddle.net/DTcHh/

Answer 1

问题是 col- 类使它们应用于 float 的元素。您需要使用 clearfix 将它们包装在一个容器中。你可能想要这个(注意 row 也适用 clearfix):

<h4>Profile</h4>
<div class="row">
    <div class="form-group col-sm-8">
      <label class="col-sm-2 control-label">Name :</label>
      <div class="col-sm-6">
        myName
      </div>
    </div>
    <div class="form-group col-sm-8">
      <label class="col-sm-2 control-label">Email :</label>
      <div class="col-sm-8">
        me@internet.org
      </div>
    </div>
</div>

<h4>Credits</h4>
<div class="form-group col-sm-8">
  <label class="col-sm-2 control-label">Credits :</label>
  <div class="col-sm-7">
    42
  </div>
</div>