Bootstrap 列空白垂直

Question

我对 Bootstrap 列有问题 - 列之间有一个空白空间，如图所示：

我的代码很简单 - 一个 div，所有列都有一个类行，每列都有类col-xs-2

<div class="row">
    <div class="col-xs-2">
     .... checkboxes with labels....
    </div>
    /* col-xs-2 is repeated a few times */
</div>

我已经在 StackOverflow 上的类似帖子中阅读了有关clearfix 的内容，但我不知道如何在我的情况下应用它。感谢您提供的任何帮助！

Answer 1

首先溢出两列，然后像这样开始一个新行：

<div class="row">
    <div class="col-md-6">
        <div class="row">
            <div class="col-md-12">
                Red box content
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                blue box content
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="row">
            <div class="col-md-12">
                green box content
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                Other box content
            </div>
        </div>
    </div>
</div>