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>