Bootstrap 4 中的列间填充，没有边距

Question

我正在使用 Bootstrap 4.1。我想要一个单元格网格（框 A-E），它们之间有一些间距。如果我在每一列上设置填充，我也会在左侧和右侧获得填充，这会破坏与其他元素的对齐；例如，我希望 Box A 和 Box D 与 Top Box 的左边缘对齐。

文档中谈到使用负边距来抵消这一点，但我不知道该放在哪里。

这组框是动态的（可能有几十个），我想对所有框应用一致的样式，而不是对特定框进行修改。

我还想避免修改顶部框，它是我真实页面中许多现有 UI 元素的替代品，无法轻易更改。

这是一个 JSFiddle： https://jsfiddle.net/u5094cjb/2/

body {
  margin: 1rem;
}

.box {
  border: 1px solid black;
  background-color: white;
  margin-bottom: 0.1rem;
}

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

<div class="container">

  <!-- ideally don't change this part --> 
  <div class="row">
    <div class="col">
      <div class="box">Top Box</div>
    </div>
  </div>


  <!-- change this part only -->
  <div class="row">
    <div class="col">
      <div class="container">
        <div class="row">
          <div class="col-4 px-1">
            <div class="box">Box A</div>
          </div>
          <div class="col-4 px-1">
            <div class="box">Box B</div>
          </div>
          <div class="col-4 px-1">
            <div class="box">Box C</div>
          </div>
          <div class="col-4 px-1">
            <div class="box">Box D</div>
          </div>
          <div class="col-4 px-1">
            <div class="box">Box E</div>
          </div>
        </div>
      </div>
    </div>
  </div>


</div>

Answer 1

使用 Bootstrap 类 pr-1 & pl-0 而不是 px-1 到方框 A 和方框 D

例如，

<div class="col-4 px-1">
  <div class="box">Box B</div>
</div>
<div class="col-4 px-1">
  <div class="box">Box C</div>
</div>
<div class="col-4 pr-1 pl-0">
  <div class="box">Box D</div>
</div>
<div class="col-4 px-1">
  <div class="box">Box E</div>
</div>

Fiddle: https://jsfiddle.net/kongallis/cebqw7y8/2/

Answer 2

对于您要完成的任务，您使用的代码似乎“太多”了。我稍微清理了一下，现在你只有两行并将 px-1 添加到你的第一个 col

body {
  margin: 1rem;
}

.box {
  border: 1px solid black;
  background-color: white;
  margin-bottom: 0.1rem;
}

<head>
   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>
<div class="container">
   <div class="row">
        <div class="col px-1">
            <div class="box">Top Box</div>
        </div>
    </div>
</div>
<div class="container">
    <div class="row">
        <div class="col-4 px-1">
            <div class="box">Box A</div>
        </div>
        <div class="col-4 px-1">
            <div class="box">Box B</div>
        </div>
        <div class="col-4 px-1">
            <div class="box">Box C</div>
        </div>
        <div class="col-4 px-1">
            <div class="box">Box D</div>
        </div>
        <div class="col-4 px-1">
            <div class="box">Box E</div>
        </div>
    </div>
</div>

Bootstrap 4 中的列间填充，没有边距

Inter-column padding in Bootstrap 4 without side margins

css

twitter-bootstrap

bootstrap-4