Bootstrap卡片在lg断点（1199px）下居中对齐问题求助

问题核心 #

你遇到的布局错乱，根源在于外层额外的flex容器与Bootstrap网格系统冲突，加上列上混乱的自定义对齐类（mx-auto、me-lg-auto）打乱了原生布局逻辑：

• Bootstrap的row本身就是flex容器，外层嵌套card-container的flex属性会干扰row的默认间距与对齐规则
• 不同列上的mx-auto/me-lg-auto让第三张卡片在lg断点下被强制推到右侧，导致整体错位

解决方案 #

通过简化布局结构、利用Bootstrap原生类实现规范对齐，无需额外padding：

1. 修改HTML结构（移除冗余容器+统一列类）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>AJ</title>

  <link
    href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
    rel="stylesheet"
    integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
    crossorigin="anonymous"
  />

  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <div class="about"></div>
  <div class="wrapper3">
    <div class="text-center my-5">
      <h1 class="display-1 text-white my-5">
        Blog on <span class="text-warning fw-medium">medium</span>
      </h1>
    </div>
    <!-- 移除外层card-container，直接用row控制布局 -->
    <div class="row justify-content-center">
      <div class="col-xl-4 col-sm-12 col-lg-6 mb-4">
        <div class="card cardStyle rounded-0 text-white">
          <img
            src="https://miro.medium.com/v2/resize:fit:750/format:webp/1*NF1u0378i1-dt2OrzAzhlA.jpeg"
            class="card-img-top"
            alt="guy wielding a sword"
          />
          <div class="card-body text-center">
            <h5 class="card-title my-2">
              The 3 Worst Enemies of Human Potential and How to Combat them
            </h5>
            <p class="card-text my-4">
              We all have our abilities and talents that if used fully has the potential to help us lead the kind of life we aspire to live"...
            </p>
            <a href="#" class="btn btn-warning rounded-0">Read More</a>
          </div>
        </div>
      </div>
      <div class="col-xl-4 col-sm-12 col-lg-6 mb-4">
        <div class="card cardStyle rounded-0 text-white">
          <img
            src="https://miro.medium.com/v2/resize:fit:828/format:webp/1*vSa-09NYjRTrj7dEQv1GAw.jpeg"
            class="card-img-top"
            alt="..."
          />
          <div class="card-body text-center">
            <h5 class="card-title my-2">
              7 strategies to help you achieve your goals and fight off procrastination
            </h5>
            <p class="card-text my-4">
              We all have aspirations and dreams, but what hinders us from reaching our goals? A significant obstacle to productivity...
            </p>
            <a href="#" class="btn btn-warning rounded-0">Read More</a>
          </div>
        </div>
      </div>
      <div class="col-xl-4 col-sm-12 col-lg-6 mb-4">
        <div class="card cardStyle rounded-0 text-white">
          <img
            src="https://miro.medium.com/v2/resize:fit:828/format:webp/1*HHy3RDE8QcRsDpMrKLUvIQ.jpeg"
            class="card-img-top"
            alt="..."
          />
          <div class="card-body text-center">
            <h5 class="card-title my-2">
              6 Reasons Why Sensitive High Achievers Should Start Journaling
            </h5>
            <p class="card-text my-4">
              Are you a big-picture person, needing to understand the 'why' for better commitment? Do you struggle to articulate thoughts or...
            </p>
            <div class="text-center">
              <a href="#" class="btn btn-warning rounded-0">Read More</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <script
    src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
    crossorigin="anonymous"
  ></script>
</body>
</html>

2. 修正CSS代码（修复选择器错误+优化移动端布局）

.wrapper3 {
  max-width: 100%;
  min-height: 70vh;
  background-color: red;
}

.cardStyle {
  max-width: 380px;
  min-height: auto;
  background-color: #2e2d2c;
}

@media screen and (max-width: 600px) {
  /* 修复选择器缺失的. */
  .wrapper3 {
    width: 100%;
    background-color: red;
  }
  .cardStyle {
    width: 70%;
    height: auto;
    background-color: #2e2d2c;
    /* 移动端卡片居中 */
    margin-left: auto;
    margin-right: auto;
  }
}

修改说明 #

1. 移除card-container：Bootstrap的row本身是flex容器，额外嵌套flex会破坏原生布局逻辑
2. 添加justify-content-center到row：让所有列在水平方向自动居中，完美适配lg断点两列、xl断点三列的布局
3. 统一列类：去掉所有列上的mx-auto/me-lg-auto，依赖网格系统自动分配空间
4. 修复CSS选择器错误：原移动端媒体查询的wrapper3少了.，导致样式不生效
5. 移动端卡片居中：给cardStyle添加margin:auto，确保小屏幕下卡片居中显示

内容的提问来源于stack exchange，提问作者abdo jama