如何在三个Bootstrap列之间添加边距而不进行包装

Question

.background-color {
background-color: lightgrey;
height: 200px;
border: 1px solid black;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-4 background-color">1</div>
<div class="col-4 background-color">2</div>
<div class="col-4 background-color">3</div>
</div>
</div>

所以我有三列，每列宽度为4列，每当我添加m-3(四周的边距(时，它们就会因此而中断，我如何才能包含它们？所以他们三个人都在同一条线上？

.background-color {
background-color: lightgrey;
height: 200px;
border: 1px solid black;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-4 background-color m-3">1</div>
<div class="col-4 background-color m-3">2</div>
<div class="col-4 background-color m-3">3</div>
</div>
</div>

Answer 1

我看到的唯一方法是嵌套其他元素。

<div class="container">
<div class="row">
<div class="col-4"><div class="col-12 background-color m-3">1</div></div>
<div class="col-4"><div class="col-12 background-color m-3">2</div></div>
<div class="col-4"><div class="col-12 background-color m-3">3</div></div>
</div>
</div>

Answer 2

Bootstrap列系统(您可能知道(基于页面有12个概念列的想法。然后使用col-*类来指示每个元素占据这12列中的多少列。因此，在本例中，您已经声明每个元素占用4列，这意味着它们使用了所有12个概念列。

问题是HTML中的边距在元素之外。因此，如果您有三个元素，每个元素使用4列，然后添加一些边距，那么您现在的宽度就超过了可用的12列的宽度(这里是12列加上三批m-3(。结果，第三个元素没有足够的空间显示，并流到下一行。

为了避免这种情况，可以使用填充而不是边距(因为填充在元素内部，所以在坚持网格宽度的同时可以获得视觉分离(。或者，您可以将元素的宽度缩小到col-3，并在其外部添加边距。然而，这可能意味着(取决于您的布局(它没有使用全宽。

最终，如果您需要在页面上使用三个带边距的元素，那么最好定义自己的类，而不是尝试使用Bootstrap类。当你与框架一起工作时，框架是很棒的，而当你与它们对抗时，框架则是痛苦的！

Answer 3

.background-color {
background-color: lightgrey;
height: 200px;
border: 1px solid black;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="container-fluid">
<div class="row">
<div class="col background-color m-3 ">1
</div>
<div class="col background-color  m-3">2</div>
<div class="col background-color  m-3">3</div>
</div>
</div>

使用col而不是col-4