使用边距而不是填充的引导装订线

Question

深入了解 Bootstrap 排水沟让我意识到列之间的空间是使用填充而不是边距添加的。

这是有问题的，因为如果您想使用 Bootstrap 5 的默认 flexbox 来获得等高的列，则必须将框阴影或背景等内容应用于列本身。 这意味着使用填充的装订线会在列内产生尴尬的白色间隙，而不是列之间的空间。

这是一个演示我的问题的小提琴：

 .red { background-color: red; color: white; }.blue { background-color: blue; color: white; }

 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css"> <h2> No Gutters </h2> <div class="container px-5"> <div class="row "> <div class="col-6 red"> <p>Column content</p> <p>is different</p> <p>heights.</p> </div> <div class="col-6 blue"> <p>See? Shorter.</p> </div> </div> </div> <h2> Gutters via Padding </h2> <div class="container px-5"> <div class="row gx-4"> <div class="col-6 red"> <p>Column content</p> <p>is different</p> <p>heights.</p> </div> <div class="col-6 blue"> <p>See? Shorter.</p> </div> </div> </div> <h2> Gutters fine but BG Wonky </h2> <div class="container px-5"> <div class="row gx-4"> <div class="col-6"> <div class="red"> <p>Column content</p> <p>is different</p> <p>heights.</p> </div> </div> <div class="col-6"> <div class="blue"> <p>See? Shorter.</p> </div> </div> </div> </div>

有没有办法让列之间的空间充当边距而不是填充？ 如果您添加一个直线向上的边距，它会将整个网格布局推得一团糟。