Bootstrap Col布局问题：大屏满宽排列、中屏及以下每行3列如何实现？

完全可以实现，你需要调整Bootstrap栅格类的组合顺序，并确保列元素包裹在.row容器内：

• 每个列元素添加类 col-4 col-lg
• 所有列必须放在带有.row类的容器中

代码示例 #

<div class="row">
  <div class="col-4 col-lg">列1</div>
  <div class="col-4 col-lg">列2</div>
  <div class="col-4 col-lg">列3</div>
  <div class="col-4 col-lg">列4</div>
  <div class="col-4 col-lg">列5</div>
  <div class="col-4 col-lg">列6</div>
  <div class="col-4 col-lg">列7</div>
  <div class="col-4 col-lg">列8</div>
  <div class="col-4 col-lg">列9</div>
</div>

逻辑说明 #

• col-4：针对medium及以下屏幕（包括xs、sm、md），每个列占1/3宽度（4/12），刚好每行3个
• col-lg：针对大屏（lg及以上），每个列自动均分剩余宽度，9个列会横向占满整行（每个列占1/9宽度）
• .row容器是Bootstrap栅格的核心，负责处理列的间距和布局规则

你之前尝试的col col-md-4组合逻辑反了：col是小屏幕自动均分，col-md-4是大屏（md及以上）占1/3，刚好和你的需求相反。而col-4 col-lg-1用固定宽度的col-lg-1（占1/12），9个列加起来只有9/12宽度，自然无法占满整行，换成不带数字的col-lg就能实现自动均分。

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