如何微调col-sm-X类断点 非全局覆盖Bootstrap列响应式行为

不需要修改Bootstrap全局样式，只需要给目标区块加专属标识类做局部控制即可，以下是可直接落地的实现方法：

第一步：先修正原有代码的基础错误 #

你当前的代码存在Col标签未正确闭合的问题，结束标签缺少斜杠，这是很多设备下响应式断点渲染异常的直接诱因，先修正标签结构：

<!-- 给外层Row添加专属自定义类，用于后续精准定位样式，避免影响其他区块 -->
<Row class="custom-grid-row">
  <Col class="col-xs-12 col-sm-12 col-md-4"> /* 内容区 */ </Col>
  <Col class="col-xs-12 col-sm-12 col-md-4"> /* 内容区 */ </Col>
  <Col class="col-xs-12 col-sm-12 col-md-4"> /* 内容区 */ </Col>
</Row>

方案1：用Bootstrap原生类调整断点（无额外CSS） #

Bootstrap 3默认栅格断点规则如下，你可以直接根据预期表现调整对应尺寸的col类，不需要写额外样式：

• 超小屏（手机，xs）：宽度 < 768px
• 小屏（平板，sm）：768px ≤ 宽度 < 992px
• 中屏（普通桌面，md）：992px ≤ 宽度 < 1200px
• 大屏（大尺寸桌面，lg）：宽度 ≥ 1200px

举个例子，如果你希望平板尺寸（sm断点）下就显示为3列，而不是默认的全宽单列，直接把列上的col-sm-12替换为col-sm-4即可，原生类的优先级稳定，不会出现样式冲突。

方案2：自定义媒体查询覆盖局部样式 #

如果Bootstrap默认断点阈值不符合你的需求，可以通过自定义类限定样式作用域，只针对当前区块的栅格做调整，完全不影响全局默认行为：

/* 样式仅作用在custom-grid-row下的Col元素，其他位置的栅格不受影响 */
.custom-grid-row Col {
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
}

/* 自定义断点示例：宽度小于900px时每列占满整行 */
@media (max-width: 899px) {
  .custom-grid-row Col {
    width: 100%;
    float: left;
  }
}

/* 宽度大于等于900px时每列占1/3宽度，实现3列布局 */
@media (min-width: 900px) {
  .custom-grid-row Col {
    width: 33.333333%;
    float: left;
  }
}

你可以根据实际需求修改媒体查询的尺寸阈值、列宽占比，因为所有样式都挂载在自定义的custom-grid-row类下，不会污染全局Bootstrap样式。

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