排水沟水平不使用Bootstrap 5

Question

我试图把沟(使用引导带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

只需在"col“类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>

排水沟将设置填充-右和填充-左在每一列。因此，您不应该在"col“div中添加任何内容，只有填充才是可见的。