我的元素正在使用 Bootstrap，我有四个数据列表需要响应式显示:
111 222 333 444
111 333
111
111 333
111 333
111 444
222
111
111
111
222
333
333
444
所以我尝试使用 Bootstrap 网格来做到这一点。 但是，它们在两列之间仍然存在差距。 我认为这是因为 bootstrap 会同步包裹在同一行中的两列的高度。
这是我的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>最佳答案
听起来您指的是当列溢出到第二行时列之间出现的垂直间隙。如果是这样，这个问题之前已经被问过并且在这里有很好的答案:https://stackoverflow.com/a/22311212/170309
由于您使用的是 Bootstrap，因此最好的选择可能是像这样使用 Masonry 卡的内置功能(来自上述答案的示例):https://www.codeply.com/go/q03ZHDeSGN
关于javascript - 如何删除 Bootstrap 上两列之间的间隙，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59819111/