如何减少引导列之间的间隙[重复]答案

【问题标题】：How to reduce gap between bootstrap columns [duplicate]如何减少引导列之间的间隙[重复]
【发布时间】：2019-01-21 17:29:53
【问题描述】：

我有这段代码，它连续显示 4 个项目。我已经给出了列边框，让您了解每列的大小。在每一列内都有一个固定宽度和高度的包装器，用于显示图像和文本。现在是否可以减少大型设备的列之间的间隙？ https://jsfiddle.net/3j6x1fou/

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

    <title>Hello, world!</title>
    <style type="text/css">
        .green {
            border: 1px solid green;
        }
        .blue {
            border: 1px solid blue;
        }
        .orange{
            border: 1px solid orange;
        }
        .yellow {
            border: 1px solid yellow;
        }

        .size {

        }

        .wrapper {
            width: 180px;
            height: 200px;
        }

        .inherit {
            width: inherit;
            height: inherit;
        }

    </style>
  </head>

  <body>

    <div class="row">
        <div class="col-sm-4 col-md-3 mt-5 mt-md-0 green">
            <div class="wrapper" style="margin: 0 auto;">
            <img class="img-fluid inherit" src="https://i.redd.it/dkcm8of8x9b01.jpg"> 
            <div>Xtres Watch R007</div>     
            </div>
        </div>
        <div class="col-sm-4 col-md-3 mt-5 mt-md-0 blue">
            <div class="wrapper" style="margin: 0 auto;">
           <img class="img-fluid inherit" src="https://i.redd.it/dkcm8of8x9b01.jpg">
           <div>Xtres Watch R007</div>         
            </div>
        </div>
        <div class="col-sm-4 col-md-3 mt-5 mt-md-0 orange">
            <div class="wrapper" style="margin: 0 auto;">
          <img class="img-fluid inherit" src="https://i.redd.it/dkcm8of8x9b01.jpg">
          <div>Xtres Watch R007</div>         
            </div>
        </div>
        <div class="col-sm-4 col-md-3 mt-5 mt-md-0 yellow">
            <div class="wrapper" style="margin: 0 auto;">
          <img class="img-fluid inherit" src="https://i.redd.it/dkcm8of8x9b01.jpg">
          <div>Xtres Watch R007</div>         
            </div>
        </div>
    </div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
  </body>
</html>

【问题讨论】：

标签： css bootstrap-4

【解决方案1】：

我想当您说 gap 时，您指的是每列之间的空间，对吧？如果是这样，Bootstrap 没有提供改变这个空间大小的方法，它确实提供了 no-gutters 类，可以添加到 row 以删除列之间的间隙，但这就是关于它，除非您愿意创建更改列的padding 和margins 的类，我不建议这样做。你也可以使用 Bootstrap spacing utilities 来做一些你需要的事情

您可以使用 CSS Grid 来实现您所需要的，您几乎可以在不使用 Bootstrap 的列的情况下定义相同的布局，并且您实际上有一个 grid-gap 属性，您可以使用它来定义您想要的这些空间的大小.

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-auto-rows: minmax(150px, auto);
  grid-gap: 10px;
}

.grid-item {
  border: 1px solid red;
}

<div class="grid">
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
</div>

【讨论】：

【解决方案2】：

您需要提供自定义样式表类，因为任何一种sm-4 md-4 或lg-4 都占用容器的 1/4 宽度。
可以在这里添加代码到您的jsfiddle 帮助您。
使用.no-gutters 类和.row 作为<div class="row no-gutters">...</div>

【讨论】：