Bootstrap 4中的列间填充没有侧边距答案

【问题标题】：Inter-column padding in Bootstrap 4 without side marginsBootstrap 4中的列间填充没有侧边距
【发布时间】：2022-02-08 03:21:56
【问题描述】：

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

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

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

我还想避免对 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>

【问题讨论】：

标签： css twitter-bootstrap bootstrap-4

【解决方案1】：

对于您要完成的工作，您似乎使用了一些“太多”的代码。我把它清理了一下，现在你只有两行，并将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>

【讨论】：

这正是我希望它看起来的样子，尽管在我的应用程序中还有许多其他组件我必须修改才能让所有内容都排列好，所以我希望只有通过修改才有可能带有方框 A-E 的区域。
你的“应用程序”是指只有更多的带有 col-4 的行吗？我认为这应该适用于所有内容，因为它们都具有相同的px-1 排水沟间距，并且每一行都嵌套在container 中。如果您愿意，请随时更新问题。
好的，我认为这是在做我想做的事：jsfiddle.net/Lawdr385/1 虽然没有使用 Bootstrap 类。
啊。在 Bootstrap 4.2 中添加了像 mx-n4 这样的负合并类。这就是文档中的示例不起作用的原因。
这里是 Bootstrap 4.6。感谢您指出这比我想象的要容易。 jsfiddle.net/Lawdr385/2 我会尽量简化 HTML 以避免不必要的嵌套。

【解决方案2】：

使用 Bootstrap 类 pr-1 和 pl-0 而不是 px-1 到 Box A 和 Box 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>

小提琴：https://jsfiddle.net/kongallis/cebqw7y8/2/

【讨论】：

谢谢。我想对所有这些都应用相同的样式，而不是修改特定的框。在实际版本中，盒子的数量是动态的，可能有几十个，因此必须知道将 pr-1 pl-0 应用于哪些盒子会很复杂。