为何在Bootstrap 4小屏幕中无法适配4列卡片布局？

AI 小北

2026-8-2

解决4列卡片小屏幕适配问题

核心问题诊断

你的问题根源在于没有采用适配性更强的布局方案：固定min-width:300px会让小屏幕下最后一列被迫换行后，因剩余空间充足被强行拉伸；不设置时又因卡片内容高度不一致、布局属性配置不合理导致错位。

方案1：CSS Grid（推荐，适配性最优）

用Grid的自动适配特性，既能保证最小宽度，又能自动调整列数，避免拉伸和错位：

.card-container {
  display: grid;
  /* 自动适配列数，最小300px，超出部分平均分配宽度 */
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1rem; /* 统一控制卡片间距，替代margin避免错位 */
  padding: 1rem;
}

.card {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  padding: 1.5rem;
  overflow: hidden; /* 防止内部内容撑破卡片 */
}

对应的HTML结构：

<div class="card-container">
  <div class="card">
    <h3>卡片标题1</h3>
    <p>卡片内容，支持任意长度，不会破坏布局</p>
  </div>
  <div class="card">
    <h3>卡片标题2</h3>
    <p>短内容</p>
  </div>
  <div class="card">
    <h3>卡片标题3</h3>
    <p>较长的测试内容，用来验证高度不一致时是否错位</p>
  </div>
  <div class="card">
    <h3>卡片标题4</h3>
    <p>普通长度内容</p>
  </div>
</div>

方案2：Flexbox（兼容旧浏览器）

如果需要兼容不支持Grid的旧环境，用Flexbox的弹性属性解决：

.card-container {
  display: flex;
  flex-wrap: wrap; /* 空间不足时自动换行 */
  gap: 1rem;
  padding: 1rem;
}

.card {
  /* 弹性布局核心：可伸缩，基础宽度300px */
  flex: 1 1 300px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  padding: 1.5rem;
  overflow: hidden;
}