col-lg在不同分辨率显示器下的差异化布局需求问询

架构老林

2026-5-25

解决方案：针对特定LG区间分辨率自定义Bootstrap列布局

嘿，这个需求其实可以通过自定义CSS媒体查询来实现，因为Bootstrap默认的lg断点是≥992px，没法直接区分1366x768和1920x1080这两个同属LG区间的分辨率。下面是具体的实现步骤和代码示例：

步骤1：修改HTML结构，添加自定义类

先保留原有的Bootstrap响应式类，同时给目标列添加一个自定义类（比如custom-col-lg），方便后续在CSS中精准定位：

<div class="catalogo">
  <div class="row">
    <!-- 给列添加custom-col-lg类 -->
    <div class="col-lg-3 col-md-6 col-sm-12 col-xs-12 custom-col-lg">
      <!-- 你的卡片内容 -->
    </div>
    <!-- 重复的卡片列 -->
    <div class="col-lg-3 col-md-6 col-sm-12 col-xs-12 custom-col-lg">
      <!-- 你的卡片内容 -->
    </div>
  </div>
</div>

步骤2：编写自定义媒体查询

通过媒体查询针对1366x768和1920x1080这两个分辨率，覆盖Bootstrap列的宽度。你可以根据需求调整width值（对应Bootstrap的col比例，比如col-lg-4对应33.333%，col-lg-2对应16.666%）：

/* 针对1366x768分辨率（宽度在1366px到1919px之间） */
@media screen and (min-width: 1366px) and (max-width: 1919px) {
  .custom-col-lg {
    flex: 0 0 auto; /* 保持Bootstrap列的flex特性 */
    width: 33.33333333%; /* 这里对应col-lg-4的宽度，可按需修改 */
  }
}

/* 针对1920x1080分辨率（宽度≥1920px） */
@media screen and (min-width: 1920px) {
  .custom-col-lg {
    flex: 0 0 auto;
    width: 25%; /* 这里对应col-lg-3的宽度，和原类一致，也可省略让默认样式生效 */
  }
}