如何删除引导程序上两列之间的间隙

Question

我的项目正在使用 Bootstrap，我有四个需要响应显示的数据列表，如下所示：

111 222 333 444
111     333  
111

111 333
111 333
111 444
222

111
111
111
222
333
333
444

所以我尝试使用引导网格来做到这一点。 但是，它们在两列之间仍然存在间隙。 我认为这是因为引导程序将同步包装在同一行中的两列的高度。

这是我的jsfidde： https://jsfiddle.net/5zv0rcf8/

<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="row">
<div class="row">
<div class="col-12 col-lg-6 col-xl-3">
111 <br>
111 <br>
111 <br>
</div>
<div class="col-12 col-lg-6 col-xl-3">
222<br />
</div>
<div class="col-12 col-lg-6 col-xl-3">
333<br />
333<br />
333<br />
</div>
<div class="col-12 col-lg-6 col-xl-3">
444<br />
</div>
</div>
</div>
<hr>
<div class="row">
<div class="col-12 col-xl-6 row">
<div class="col-12 col-lg-6">
111 <br>
111 <br>
111 <br>
111 <br>
111 <br>
111 <br>
</div>
<div class="col-12 col-lg-6">
222<br />
</div>
</div>
<div class="col-12 col-xl-6 row">
<div class="col-12 col-lg-6">
333<br />
333<br />
</div>
<div class="col-12 col-lg-6">
444<br />
444<br />
444<br />
444<br />
444<br />
</div>
</div>
</div>

Answer 1

听起来您指的是列之间溢出到第二行时出现的垂直间隙。如果是这样，这个问题之前已经问过，在这里有一个很好的答案：https://stackoverflow.com/a/22311212/170309

由于您使用的是 Bootstrap，最好的选择可能是使用像这样的砌体卡的内置功能(上述答案中的示例(： https://www.codeply.com/go/q03ZHDeSGN

Answer 2

尝试移除装订线

<div class="row no-gutters">
</div>

在此处阅读文档 - https://getbootstrap.com/docs/4.0/layout/grid/#no-gutters

Answer 3

如果你想删除装订线间距，所以在行div上使用无装订线，你也可以使用p-0它的填充0px，你可以将这个类与行容器一起使用，列div在引导CSS表中它的引导预定义类。 请遵循引导的正确结构，这里是下面的链接。 https://getbootstrap.com/docs/4.0/layout/grid/

<div class="row">
<div class="col-12 col-lg-6 col-xl-3 p-0">
Column1
</div>
<div class="col-12 col-lg-6 col-xl-3 p-0">
Column2
<br/> Column2
<br/> Column2
<br/> Column2
<br/>
</div>
<div class="col-12 col-lg-6 col-xl-3 p-0">
Column3
<br/> Column3
<br/> Column3 Column3 Column3
</div>
<div class="col-12 col-lg-6 col-xl-3 p-0">
Column4
</div>
</div>
</div>