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

Question

我的项目正在使用Bootstarp，并且我有四个需要响应显示的数据列表：

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一起使用，以在bootstrap css工作表中使用其bootstrap预定义类。并请遵循引导程序的正确结构，这是下面的链接。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>