无法在 bootstrap 的行内将 col class 居中

Question

我最近一直在做一些 bootstrap，我偶然发现了一个问题。也就是说，我使用 container 并在其中嵌套 row 加上几个 col class。这是一个 codesandbox link. As you can see, I use a styled component for the <Rectangle /> and then I add three of them in the first row and one in the second. However they aren't centered and I tried to center them by adding align-items and mx-auto but did not make it. 从照片中可以看出，div.row 内的矩形没有居中，而是有点浮动在左侧。第二行也是如此，它没有居中。我的问题是，是否可以将这些矩形 (col classes) 置于 row class 的中心？在这种情况下，我添加了 3x1，但在我的场景中，它是动态的，在某些情况下，我会在顶部有 2 个矩形，在底部有 2 个，在顶部有 2 个，在底部有 1 个，等等，我需要它们自动居中。如果可能的话，我怎样才能实现它并使它们居中？

Answer 1

要对齐列中的项目，请制作 .col flex 然后您可以调整（对齐）子项目。将 d-flex justify-content-center 添加到您的列以使其对齐

.jKVMcY {
  height: 90px;
  width: 115px;
  color: black;
  display: flex;
  background-color: rgb(229, 228, 226);
  border-radius: 7px;
  justify-content: center;
  align-items: center;
  border: 1px solid;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">


<div class="container py-3 bg-light">
  <div class="row">
    <div class="col d-flex justify-content-center">
      <div class="sc-bczRLJ jKVMcY">test</div>
    </div>
    <div class="col d-flex justify-content-center">
      <div class="sc-bczRLJ jKVMcY">test</div>
    </div>
    <div class="col d-flex justify-content-center">
      <div class="sc-bczRLJ jKVMcY">test</div>
    </div>
  </div>
</div>

无法在 bootstrap 的行内将 col class 居中

Cannot center a col class inside a row from bootstrap

css

bootstrap-4