如何通过CSS/Bootstrap3实现12个Div的3列/4列响应式布局

嘿，我来帮你解决这个响应式布局的问题！你之前手动包裹div的方式确实会限制布局灵活性，其实用纯CSS的Flexbox/Grid或者Bootstrap3的栅格系统，就能轻松实现3列和4列的切换，不用额外嵌套结构，下面给你详细说两种方案：

纯CSS解决方案（Flexbox/Grid） #

这两种方式都不需要修改现有HTML结构，直接通过CSS就能实现响应式切换。

方案1：Flexbox（兼容性更好） #

Flexbox是很成熟的布局方案，几乎所有现代浏览器都支持，实现起来也灵活：

/* 容器基础样式 */
.cb-Categorie-Wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem; /* 可选：给每个分类卡片加间距，可根据需求调整 */
  margin: 0 -0.5rem; /* 抵消gap的左右外边距，可选 */
}

/* 默认布局：3列（比如手机竖屏） */
.cb-Categorie {
  flex: 0 0 calc(33.333% - 1rem); /* 3列平分宽度，减去gap的影响 */
  box-sizing: border-box; /* 确保内边距、边框不会撑宽元素 */
  margin: 0 0.5rem 1rem; /* 和gap配合，控制上下左右间距 */
}

/* 媒体查询：适配平板横屏/手机横屏等较宽场景，切换为4列 */
@media (min-width: 768px) and (orientation: landscape),
       (min-width: 1024px) {
  .cb-Categorie {
    flex: 0 0 calc(25% - 1rem); /* 4列平分宽度 */
  }
}

方案2：Grid（更简洁直观） #

Grid布局在等分布局场景下代码更简洁，直接定义列数即可：

/* 容器基础样式 */
.cb-Categorie-Wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 默认3列，每列宽度均等 */
  gap: 1rem; /* 控制元素之间的间距 */
}

/* 媒体查询切换为4列 */
@media (min-width: 768px) and (orientation: landscape),
       (min-width: 1024px) {
  .cb-Categorie-Wrapper {
    grid-template-columns: repeat(4, 1fr); /* 切换为4列 */
  }
}

Bootstrap3解决方案 #

如果你已经在用Bootstrap3，直接利用它的栅格系统就能快速实现，不用写太多自定义CSS：

首先调整HTML结构，给每个cb-Categorie加上Bootstrap的栅格列类：

<div class="cb-Categorie-Wrapper row">
  <div class="cb-Categorie col-xs-4 col-md-3">分类1</div>
  <div class="cb-Categorie col-xs-4 col-md-3">分类2</div>
  <div class="cb-Categorie col-xs-4 col-md-3">分类3</div>
  <!-- 重复到12个分类 -->
</div>

逻辑说明： #

• .col-xs-4：在手机竖屏（<768px）时，每个元素占12栅格中的4份，12/4=3列，正好符合你的3列需求。
• .col-md-3：在平板横屏及以上（≥992px）时，每个元素占3份，12/3=4列，实现4列布局。

如果需要针对平板竖屏且横屏的场景单独调整，可以加一段自定义媒体查询：

/* 平板竖屏宽度（768px-991px）且横屏时，切换为4列 */
@media (min-width: 768px) and (max-width: 991px) and (orientation: landscape) {
  .cb-Categorie {
    width: 25%;
    float: left; /* 继承Bootstrap的浮动布局 */
  }
}

这样就能完美适配不同设备的方向和宽度了！

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