为什么列不在 Bootstrap 5 的中心？

Question

为什么 Bootstrap 5 中的列不居中且间距相等？下面是代码和 fiddle link.

https://jsfiddle.net/juantamad/1o59tsqw/3/

<section>
  <div class="row text-center mb-5">
    <div class="col">Letters</div>
  </div>
  <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3 text-center container">
  <div class="col">
    <h2>A</h2>
    <p>B</p>
    <p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
  </div>
  <div class="col">
    <h2>C</h2>
    <p>D</p>
    <p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
  </div>
  <div class="col">
    <h2>E</h2>
    <p>F</a></p>
    <p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
  </div>
  <div class="col">
    <h2>G</h2>
    <p>H</p>
    <p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
  </div>
</div>

Answer 1

它们没有居中，因为 .text-center 不会像影响文本那样影响列。您需要使用 .justify-content-center。它们之间没有任何间距，因为您正在将自己的自定义 CSS 应用于 .col-* 属性，添加边框和填充。

您还将 .container 应用于 .row，这在 Bootstrap 的任何版本中均无效。通过更正您的 CSS 声明并将每列的内容包装在一个元素中以容纳您想要的填充/背景样式，您可以实现您的目标。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous">

<section class="container">
  <div class="row text-center mb-5">
    <div class="col">
      Letters
    </div>
  </div>

  <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3 justify-content-center text-center">
    <div class="col">
      <div class="bg-light border p-3">
        <h2>A</h2>
        <p>B</p>
        <p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
     </div>
    </div>

    <div class="col">
      <div class="bg-light border p-3">
        <h2>C</h2>
        <p>D</p>
        <p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
     </div>
    </div>

    <div class="col">
      <div class="bg-light border p-3">
        <h2>E</h2>
        <p>F</p>
        <p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
     </div>
    </div>

    <div class="col">
      <div class="bg-light border p-3">
        <h2>G</h2>
        <p>H</p>
        <p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
     </div>
    </div>
  </div>
</section>

为什么列不在 Bootstrap 5 的中心？

Why are the columns not centering in Bootstrap 5?

twitter-bootstrap

bootstrap-5