html - 如何删除具有两列的行之间的空间

Question

当前布局结构:

+--------------+
| -----Row---- |
+--------------+
| Col 8  col 4 |
|          ^   |
|          |   | //Vertical Space here between col-4
|          ^   |
| Col 8  col 4 |
| -----Row---- |
+--------------+

期望的输出:

+--------------+
| -----Row---- |
+--------------+
| Col 8  col 4 |
|        col 4 | //Remove Vertical Space here between col-4
| Col 8  col 4 |
| -----Row---- |
+--------------+

因为 col-8 之间有垂直间距，所以 col-4 右边的列在同一行中垂直间隔。如何删除空格？

我想删除右侧列的垂直空格，而不是让所有列的大小都相等。

如果您查看此站点:http://mashable.com/ ，查看第二列如何在没有垂直空间的情况下堆叠，第三列如何以不同的大小/高度堆叠。

同样，我想让我的第二列堆叠起来，没有垂直空间。

Answer 1

您可以像这样将列表项放在 2 个单独的列中...

<div class="container-fluid">
    <div class="row">
        <div class="col-md-8">
            <!--item-->
            <!--item-->
        </div>
        <div class="col-md-4">
            <!--item-->
            <!--item-->
            <!--item-->
        </div>
    </div>
</div>

http://www.codeply.com/go/60g6A6sW9U

当您的列位于不同的行中时，无法使不同高度的列“适合”在一起而没有间隙。否则，您必须使用“砖石”类型的解决方案 as explained in this answer .