如何删除Bootstrap上两列之间的间隙

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，因此最好的选择可能是使用 Masonry 卡的内置功能，例如（来自上述答案的示例）：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 上使用 no-gutters 并且你可以使用 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>