html - 希望内容以父为中心但 flex 包裹

Question

我有以下标记(使用 Bootstrap 4):

.resource{
  border:1px solid red;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="resource">
  <div class="container">
    <div class="row justify-content-center">
      <div class="wrapper d-flex flex-wrap justify-content-center">
        <div class="card col-5">
          <p>test1</p>
        </div>
        <div class="card col-5">
            <p>test1</p>
          </div>
        <div class="card col-5">
          <p>test1</p>
        </div>
      </div>
    </div>
  </div>
</div>

我希望卡片左对齐而不是居中。我可以通过从 .wrapper 中删除 justify-content-center 来实现这一点，但是 .wrapper 不在 的中心.container 了。

我怎样才能做到这两者，使 .wrapper 居中于 .container 并使 .card 左对齐？

Answer 1

什么意思？删除 justify-content-center 不会影响 .wrapper 在 .container > .row 中的位置。

包装仍然居中，卡片从左对齐。

但是如果你想制作一个 2 列的网格，你需要使用 col-6 而不是 col-5，因为 Bootstrap 中的网格系统不是以 12 为底的以 10 为基数。

.resource{
  border:1px solid red;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="resource">
  <div class="container">
    <div class="row justify-content-center">
      <!-- removed "justify-content-center" -->
      <div class="wrapper d-flex flex-wrap">
        <!-- changed from "col-5" to "col-6" -->
        <div class="card col-6">
          <p>test1</p>
        </div>
        <div class="card col-6">
            <p>test1</p>
          </div>
        <div class="card col-6">
          <p>test1</p>
        </div>
      </div>
    </div>
  </div>
</div>