Question

我想创建一个8块的布局，它使用col - * - 6的bootstrap网格。我将它们放在一行中，因为它们将包含4行，因为它们都包含6个网格列。但是，由于列的高度不同，我的布局会中断。我知道我可以使用4行类来放置2个6格的列块来解决这个问题。但是，我的问题是，这是实现这一目标的唯一方法，还是我目前的方法中缺少某些东西。这是代码示例 -

<div class="row">
    <div class="col-md-6">
        <h4>Travel / 5 April 2015</h4>
        <h1>Make Some Changes To Do It With Us.</h1>
        <p>
           Nullam quis ante. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Cras ultricies mi eu turpis hendrerit fringilla. Praesent nonummy mi in odio. Praesent porttitor, nulla vitae posuere iaculis, arcu nisl dignissim dolor, a pretium mi sem ut ipsum.
        </p>
    </div>
    <div class="col-md-6">
        <img class="img-responsive" src="img/posts/1.jpg" alt="post image">
    </div>

    <div class="col-md-6">
        <img class="img-responsive" src="img/posts/1.jpg" alt="post image">
    </div>
    <div class="col-md-6">
        <h4>Travel / 5 April 2015</h4>
        <h1>Make Some Changes To Do It With Us.</h1>
        <p>
           Nullam quis ante. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Cras ultricies mi eu turpis hendrerit fringilla. Praesent nonummy mi in odio. Praesent porttitor, nulla vitae posuere iaculis, arcu nisl dignissim dolor, a pretium mi sem ut ipsum.
        </p>
    </div>


    <div class="col-md-6">
        <h4>Travel / 5 April 2015</h4>
        <h1>Make Some Changes To Do It With Us.</h1>
        <p>
           Nullam quis ante. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Cras ultricies mi eu turpis hendrerit fringilla. Praesent nonummy mi in odio. Praesent porttitor, nulla vitae posuere iaculis, arcu nisl dignissim dolor, a pretium mi sem ut ipsum.
        </p>
    </div>
    <div class="col-md-6">
        <img class="img-responsive" src="img/posts/1.jpg" alt="post image">
    </div>
</div>

Answer 1

最后我今天得到了答案。我的问题的解决方案是使用.clearfix！

在我的场景中，我的布局打破了每列的不同高度，在这种情况下，如果我使用

在每列总计12之后。

当列超过12时，Bootstrap布局会中断，但它们与12成比例

1 个答案: