justify-content 在 Bootstrap 5 中不起作用

Question

我正在使用 bootstrap 5 并创建了 4 张卡片。我想把第二张卡片放在左边。我已将类 justify-content-xl-start 添加到卡中，但它似乎不起作用。我尝试将 display: flex, flex-direction: column 和 justify-content: flex-start 添加到我的 CSS 中，但这也不起作用。我看不出我做错了什么。

我正在使用 Bootstrap 5.1.3

HTML 和 CSS

.card {
    margin-top: 40px !important;
    width: 22rem;
    height: 14rem;
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    border-radius: 10px;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
    }

 <div class="card supervisor_card">
    <div class="card-body">
      <h5 class="card-title">Supervisor</h5>
      <p class="card-text">Monitors activity to identify project roadblocks</p>
      <img src="images/icon-supervisor.svg" class="card-img" alt="icon supervisor">
    </div>
  </div>

      <div class="card team_card d-xl-flex justify-content-xl-start">
        <div class="card-body">
          <h5 class="card-title">Team Builder</h5>
          <p class="card-text">  Scans our talent network to create the optimal team for your project</p>
          <img src="images/icon-team-builder.svg" class="card-img" alt="icon supervisor">
        </div>
      </div>

<div class="card karma_card">
    <div class="card-body">
      <h5 class="card-title">Karma</h5>
      <p class="card-text">Regularly evaluates our talent to ensure quality</p>
      <img src="images/icon-karma.svg" class="card-img" alt="icon supervisor">
    </div>
  </div>

  <div class="card calculator_card">
    <div class="card-body">
      <h5 class="card-title">Calculator</h5>
      <p class="card-text">Uses data from past projects to provide better delivery estimates</p>
      <img src="images/icon-calculator.svg" class="card-img" alt="icon supervisor">
    </div>
  </div>

Answer 1

.card CSS 中的margin: 0 auto; 行将card 的左右边距设置为auto，使其水平居中。您可以将 Bootstrap 类 mx-0 添加到 control spacing 并将 margin-left 和 margin-right 设置为 0。

.card {
    margin-top: 40px !important;
    width: 22rem;
    height: 14rem;
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    border-radius: 10px;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
    }

<!-- Latest compiled and minified CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- Latest compiled JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>

<div class="card supervisor_card">
    <div class="card-body">
      <h5 class="card-title">Supervisor</h5>
      <p class="card-text">Monitors activity to identify project roadblocks</p>
      <img src="images/icon-supervisor.svg" class="card-img" alt="icon supervisor">
    </div>
  </div>

      <div class="card team_card d-xl-flex justify-content-xl-start mx-0">
        <div class="card-body">
          <h5 class="card-title">Team Builder</h5>
          <p class="card-text">  Scans our talent network to create the optimal team for your project</p>
          <img src="images/icon-team-builder.svg" class="card-img" alt="icon supervisor">
        </div>
      </div>

<div class="card karma_card">
    <div class="card-body">
      <h5 class="card-title">Karma</h5>
      <p class="card-text">Regularly evaluates our talent to ensure quality</p>
      <img src="images/icon-karma.svg" class="card-img" alt="icon supervisor">
    </div>
  </div>

  <div class="card calculator_card">
    <div class="card-body">
      <h5 class="card-title">Calculator</h5>
      <p class="card-text">Uses data from past projects to provide better delivery estimates</p>
      <img src="images/icon-calculator.svg" class="card-img" alt="icon supervisor">
    </div>
  </div>