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>标题位于以前字段下的新行上。但它显示在右上角。

有人可以解释一下为什么并帮我把它展示到正确的位置吗？

CSS小提琴：https://jsfiddle.net/DTcHh/

Answer 1

问题是col-类使它们应用于浮点数的元素。您需要将它们包装在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>

Answer 2

你可以为学分创建一个带有“行”类的新div：

<div class="row">
    <h4>Credits</h4>
</div>

Bootstrap：<h4>标题不在新行上

2 个答案: