Question

我有这段代码，可以连续显示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>

Answer 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>

Answer 2

您需要提供自定义样式表类，因为作为sm-4 md-4或lg-4的任何一种，都占用您容器的1/4宽度。
可以在此处为您的jsfiddle添加代码来帮助您。
使用.no-gutters作为.row的{{1}}类

如何减少引导程序列之间的间隙

2 个答案: