Question

我无法在2列之间添加装订线。我有一排必须为1280px宽（使用1366x768作为参考分辨率，因此我在整个页面上两边的填充均为43px），其中两个部分的宽度应为620px，中间各有40px。但是列始终是视图的一半（640像素），因此没有空间在两者之间添加装订线（即使我认为这是自动的）。默认装订线已设置为每侧20px。

<div class="wrapper">
  <div class="row">
    <div class="col-lg-6 row a">
      aaa
    </div>
    <div class="col-lg-6 row b">
      aaa
    </div>
  </div>
</div>

.wrapper {
  padding: 0 43px;
  background: red;
  height: 100vh;
}

.a {
  background: blue;
  margin: 0;
}

.b {
  margin: 0;
  background: green;
}

Answer 1

首先，将row类与col-**-*类一起使用是一种不好的做法。

第二件事是，如果您将自定义类与col-**-*类一起使用并应用background-color，那么它将覆盖您的整个列，因此请把您的自定义类作为{的子元素{1}}类，然后将col-**-*应用于您的自定义类。

以全角显示代码段：

background-color

.wrapper {
  padding: 0 43px;
  background: red;
  height: 100vh;
}

.a {
  background: blue;
  margin: 0;
}

.b {
  margin: 0;
  background: green;
}

Answer 2

在包装器中添加一个容器

<div class="wrapper">
 <div class="container"> <!-- or container-fluid -->
  <div class="row">
    <div class="col-lg-6 row a">
      aaa
    </div>
    <div class="col-lg-6 row b">
      aaa
    </div>
  </div>
 </div>
</div>

还要检查.container和.container-fluid类的工作方式 https://getbootstrap.com/docs/4.3/layout/overview/

Answer 3

据我所知，您无需编写CSS即可添加装订线，这是通过引导自身实现的。只需在像a: A

这样的div类中不添加任何装订线

Bootstrap 4无法在两列之间添加装订线

3 个答案: