Bootstrap是否支持单类实现等效嵌套row+column的响应式container效果

Bootstrap 原生没有提供你描述的这类「container-断点-列占比」的预设类。

container 系列类的设计逻辑是控制不同断点下的全局最大容器宽度，和栅格系统中 col 类的按行占比逻辑是相互独立的，所以你尝试的 container-sm 这类类只能控制容器的最大宽度切换，无法实现按列占比调整宽度的效果。

原生支持的最简实现方案 #

你不需要嵌套三层结构，单元素即可实现完全一致的效果，直接给目标div添加col相关类 + 水平居中类 mx-auto 即可：

<div className="col-lg-6 col-sm-10 mx-auto">
   ...
</div>

该写法的效果和你原有三层嵌套结构完全一致：col类自带和container对齐的左右内边距，mx-auto 实现水平居中，不同断点下的宽度规则和原有的 col-lg-6 col-sm-10 完全相同。

自定义工具类方案 #

如果你确实需要使用 container-lg-6 这类命名的工具类，可以基于 Bootstrap 的 Sass 变量批量生成，示例代码如下：

@each $breakpoint in map-keys($grid-breakpoints) {
  @for $i from 1 through $grid-columns {
    .container-#{$breakpoint}-#{$i} {
      @include media-breakpoint-up($breakpoint) {
        max-width: percentage($i / $grid-columns);
        margin: 0 auto;
        padding: 0 $container-padding-x;
      }
    }
  }
}

编译后即可得到所有对应命名的工具类。

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