Bootstrap中Flexbox布局不符合预期的问题求助

你的核心问题是缺少Bootstrap列宽度控制类，加上项目中可能存在的全局样式冲突，导致卡片从横向排列变成纵向堆叠且撑满宽度。以下是具体解决方案：

1. 给卡片添加列类（最直接的修复） #

Bootstrap的row是flex容器，但直接在row里放card，卡片默认是块级元素会占满容器宽度。必须给每个卡片外层添加列类（比如col-md-5）来限制宽度，确保横向排列：

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

<div class="row justify-content-around">
  <!-- 添加col-md-5控制宽度 -->
  <div class="col-md-5">
    <div class="card costum-card mt-5">
      <div class="card-head mt-4 mx-3">
        <h1>Mix&Max</h1>
      </div>
      <div class="card mt-2 mx-3 border border-white">
        <div class="card nested-card">
          <div class="card-body">
            <img src="phone.png" class="img-fluid card-img" />
            <p class="card-body-bold">One Smart Pro</p>
            <p class="card-body-light">10 GB, Minuta, SMS Pa Limit</p>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- 添加col-md-5控制宽度 -->
  <div class="col-md-5">
    <div class="card costum-card mt-5">
      <div class="card-head mt-4 mx-3">
        <h1>Mix&Max</h1>
      </div>
      <div class="card mt-2 mx-3 border border-white">
        <div class="card nested-card">
          <div class="card-body">
            <img src="phone.png" class="img-fluid card-img" />
            <p class="card-body-bold">One Smart Pro</p>
            <p class="card-body-light">10 GB, Minuta, SMS Pa Limit</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

注：row本身默认是flex容器，不需要额外加d-flex。你可以根据需求调整列类，比如col-lg-4 col-md-6实现响应式布局。

2. 排查项目中的样式冲突 #

如果添加列类后问题依旧，用浏览器开发者工具（F12）检查以下内容：

• 查看.card或.costum-card的计算样式，是否有width: 100%、flex: 1 1 auto这类强制占满宽度的规则
• 检查row元素的flex-direction是否被改成了column
• 确认项目中没有重复引入不同版本的Bootstrap，避免样式冲突

3. 修正自定义类拼写错误 #

你的代码里有costum-card，应该是custom-card，虽然不影响布局，但建议修正避免后续维护问题。

内容的提问来源于stack exchange，提问作者Joan Sula