Bootstrap 3如何仅用CSS按屏幕宽度自动隐藏超出12列的列？

当然可以！完全不需要JavaScript，只靠纯CSS就能实现你要的响应式列显示/隐藏效果。

先理清楚需求对应的断点逻辑 #

从你给出的col-sm-3/col-md-2/col-lg-1类名来看，你用的是Bootstrap 3的栅格系统，它的默认断点规则和你需求刚好匹配：

• lg断点（屏幕宽度>1200px）：每列占col-lg-1，12栅格刚好放下12列，所以所有列都显示，无需额外处理
• md断点（992px<宽度<1200px）：每列占col-md-2，12栅格最多放6列，需要隐藏第7列及之后的所有列
• sm断点（768px<宽度<992px）：每列占col-sm-3，12栅格最多放4列，需要隐藏第5列及之后的所有列

实现代码 #

只需要添加以下CSS媒体查询，就能精准控制不同断点下的列显示：

/* md断点区间：隐藏第7列及以后的列 */
@media (min-width: 992px) and (max-width: 1199px) {
  .row > .col-md-2:nth-child(n+7) {
    display: none;
  }
}

/* sm断点区间：隐藏第5列及以后的列 */
@media (min-width: 768px) and (max-width: 991px) {
  .row > .col-sm-3:nth-child(n+5) {
    display: none;
  }
}

逻辑说明 #

• :nth-child(n+7)是CSS伪类选择器，会选中.row父元素下第7个及所有后续的子列元素
• 媒体查询会在对应屏幕宽度区间内触发样式，通过display: none隐藏多余的列

把这段CSS和你原有的HTML代码结合，就能完美实现需求：

<div class="row"> 
  <div class="col-sm-3 col-md-2 col-lg-1">Col 1</div> 
  <div class="col-sm-3 col-md-2 col-lg-1">Col 2</div> 
  <div class="col-sm-3 col-md-2 col-lg-1">Col 3</div> 
  <div class="col-sm-3 col-md-2 col-lg-1">Col 4</div> 
  <div class="col-sm-3 col-md-2 col-lg-1">Col 5</div> 
  <div class="col-sm-3 col-md-2 col-lg-1">Col 6</div> 
  <div class="col-sm-3 col-md-2 col-lg-1">Col 7</div> 
  <div class="col-sm-3 col-md-2 col-lg-1">Col 8</div> 
  <div class="col-sm-3 col-md-2 col-lg-1">Col 9</div> 
  <div class="col-sm-3 col-md-2 col-lg-1">Col A</div> 
  <div class="col-sm-3 col-md-2 col-lg-1">Col B</div> 
  <div class="col-sm-3 col-md-2 col-lg-1">Col C</div> 
  <div class="col-sm-3 col-md-2 col-lg-1">Col D</div> 
  <div class="col-sm-3 col-md-2 col-lg-1">Col E</div> 
</div>

如果是使用Bootstrap 4/5，只需要调整媒体查询的断点数值（比如Bootstrap 4的sm断点是≥576px），核心的nth-child选择逻辑完全一致。

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