Question

我使用Bootstrap来组织三行的项目。但是当列不是相同的高度时，移动到下一行的项目最终会在上一个项目下方而不是在左侧。

<div class="row">
    <div class="col-md-4">
    </div>
    <div class="col-md-4">
        // lot of content
    </div>
    <div class="col-md-4">
        // little content
    </div>
    <div class="col-md-4">
        // stays on right side below previous item
    </div>
</div>

我已经能够通过使用JQuery来使所有具有相同y位置的列具有相同的高度来解决这个问题，但我确信有更好的方法。

Answer 1

添加如下的clearfix：

<div class="row">
    <div class="col-md-4">
    </div>
    <div class="col-md-4">
        // lot of content
    </div>
    <div class="col-md-4">
        // little content
    </div>
  <div class="clearfix"></div>
    <div class="col-md-4">
        // now goes to new line
    </div>
</div>

Answer 2

您必须使用container类别显示容器内的所有列。然后，当列号到达12列时，您必须使用新的row类直接在前一列下再次设置新列。使用下面的代码

<div class="container">
<div class="row">
<div class="col-md-4">
    // lot of content
</div>
<div class="col-md-4">
    // lot of content
</div>
<div class="col-md-4">
    // little content
</div>
</div>
<div class="row">
  <div class="col-md-4">
    // stays on right side below previous item
</div>
</div>
</div>

移动到下一行时，Bootstrap清除前面的列

2 个答案: