如何仅为特定宽度的Bootstrap列应用自定义CSS样式？

要实现仅在桌面端（lg及以上尺寸）显示边框、移动端无边框的效果，核心是利用Bootstrap的响应式媒体查询断点，结合自定义类来避免影响其他元素。

具体实现步骤： #

• 给目标元素添加专属自定义类（比如你用的only-lg-styling），避免直接修改全局的col-lg-7类，防止影响其他页面元素
• 遵循Bootstrap移动优先的设计思路编写CSS：先设置默认（移动端）样式，再通过媒体查询指定桌面端样式

示例代码： #

CSS：

/* 默认（移动端）无边框 */
.only-lg-styling {
  border: none;
}

/* 桌面端（lg及以上，对应≥992px）显示边框 */
@media (min-width: 992px) {
  .only-lg-styling {
    border: solid;
  }
}

HTML：

<div class="container">
  <div class="row">
    <div class="col-lg-7 col-12 only-lg-styling">
      1 of 2
    </div>
    <div class="col-lg-5 col-12">
      2 of 2
    </div>
  </div>
  <div class="row">
    <div class="col-lg-7 col-12">
      1 of 2
    </div>
    <div class="col-lg-5 col-12">
      2 of 2
    </div>
  </div>  
</div>

原方法无效的原因： #

Bootstrap的栅格类（如col-lg-7）会始终保留在元素的class列表中，不会随屏幕尺寸动态移除。直接使用.col-lg-7.only-lg-styling选择器会在所有屏幕下都生效，无法实现响应式区分。而通过媒体查询，能精准控制样式仅在指定断点以上生效。

注：若使用Bootstrap 3，lg断点对应≥1200px，需将媒体查询的宽度值调整为1200px；Bootstrap 4/5的lg断点均为≥992px。

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