水平排水沟与引导5不工作

Question

我试图在颜色之间放置gutter(使用Bootstrap v5)，但不知怎的，它是水平工作的，垂直工作的

<div class="right-section w-100 h-auto  container-fluid p-4">
<div class="container summary">
<h6 class="text-uppercase border-bottom border-1 fw-bold border-secondary pb-2 text-primary fs-6">Summary</h6>
<div class="container">
<div class="row gx-2 bg-danger p-4">
<div class="col d-flex  rounded bg-light align-items-center justify-content-between">
<h5 class="h-full p-4 text-uppercase fs-6 text-white">Completed</h5>
<span class="bg-warning p-4 rounded-end">06</span>
</div>
<div class="col d-flex  rounded  bg-light align-items-center justify-content-between">
<h5 class="h-full  p-4 text-uppercase fs-6 text-white">Pending</h5>
<span class="bg-warning p-4 rounded-end">03</span>
</div>
<div class="col d-flex  rounded  bg-light align-items-center justify-content-between">
<h5 class="h-full  p-4 text-uppercase fs-6 text-white">Scheduled</h5>
<span class="bg-warning p-4 rounded-end">03</span>
</div>
<div class="col d-flex  rounded  bg-light align-items-center justify-content-between">
<h5 class="h-full  p-4 text-uppercase fs-6 text-white">Postponed</h5>
<span class="bg-warning p-4 rounded-end">03</span>
</div>
</div>
</div>
</div>
</div>

Answer 1

在" color "之后添加div标签类的div .

改变:

<div class="col d-flex  rounded bg-light align-items-center justify-content- between">
<h5 class="h-full p-4 text-uppercase fs-6 text-white">Completed</h5>
<span class="bg-warning p-4 rounded-end">06</span>
</div>

:

<div class="col">
<div class="d-flex rounded bg-light align-items-center justify-content-between">
<h5 class="h-full p-4 text-uppercase fs-6 text-white">Completed</h5>
<span class="bg-warning p-4 rounded-end">06</span>
</div>
</div>

水槽将设置每列的左、右填充。因此，你不应该在"颜色"中添加任何东西Div，则只有内边距是可见的。