垂直引导列空白答案

【问题标题】：Bootstrap column empty space vertically垂直引导列空白
【发布时间】：2016-04-19 03:03:48
【问题描述】：

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

我的代码很简单 - 一个 div，所有列都有一个 row 类，每一列都有 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 的信息，但我不知道如何在我的情况下应用它。感谢您提供的任何帮助！

【问题讨论】：

你想达到什么目的？蓝框是在正下方还是红框和绿框高度一样？
嗨，我正在尝试将蓝色框抬高到红色框下方。不应该担心绿色盒子的高度更大......
所以...您想要第 1 列（其中有两个框，红色，后跟蓝色），然后是第 2 列（其中有两个框，绿色后跟棕色）？即使每个框的内容大小不同，所有带边框的框都必须具有相同的大小吗？
@GeorgeFindulov 你的问题陈述说你不喜欢空白，但你到底想要什么？
我在上面的评论中说我需要清除空白。我尝试了@Gareth 的解决方案，在玩了几分钟后，我成功了

标签： css twitter-bootstrap

【解决方案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>

【讨论】：

谢谢，我不得不用这些 div 玩了几分钟，但终于成功了！