Bootstrap 5卡片横向滚动失效问题求助

完整可运行代码 #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>横向滚动卡片</title>
  <!-- 引入Bootstrap 5 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container-fluid py-2">
    <div class="d-flex flex-row flex-nowrap" style="overflow-x: auto; padding-bottom: 10px;">
      <div class="card card-body m-2" style="min-width: 300px;">Card 1</div>
      <div class="card card-body m-2" style="min-width: 300px;">Card 2</div>
      <div class="card card-body m-2" style="min-width: 300px;">Card 3</div>
      <div class="card card-body m-2" style="min-width: 300px;">Card 4</div>
      <div class="card card-body m-2" style="min-width: 300px;">Card 5</div>
      <div class="card card-body m-2" style="min-width: 300px;">Card 6</div>
      <div class="card card-body m-2" style="min-width: 300px;">Card 7</div>
      <div class="card card-body m-2" style="min-width: 300px;">Card 8</div>
      <div class="card card-body m-2" style="min-width: 300px;">Card 9</div>
      <div class="card card-body m-2" style="min-width: 300px;">Card 10</div>
    </div>
  </div>

  <!-- 可选：Bootstrap JS（如需交互组件） -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

常见问题排查 #

• Bootstrap依赖未正确加载：必须确保页面头部引入了Bootstrap 5的CSS文件，版本需为v5.x。缺失依赖会导致d-flex、flex-row等布局类失效。
• 滚动属性不精准：将overflow: auto改为overflow-x: auto，明确仅开启横向滚动；添加padding-bottom可避免滚动条遮挡卡片底部内容。
• 父容器样式干扰：检查container-fluid或其上层元素是否存在overflow: hidden、flex-wrap: wrap等样式，这类规则会破坏横向滚动布局。
• 卡片宽度被覆盖：确认卡片的min-width: 300px未被全局CSS或其他自定义样式覆盖，可通过浏览器开发者工具查看元素样式优先级。
• HTML标签未闭合：原代码中外层<div>未闭合，浏览器自动补全可能导致布局错乱，需确保所有标签正确闭合。

内容的提问来源于stack exchange，提问作者Mohammed Riyadh