-1

为什么在 Bootstrap 5 中列不以相等的间距居中？下面是代码和小提琴链接。

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>
4

1 回答 1

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>

于 2020-07-29T16:38:40.267 回答