Bootstrap5：能否修改视口识别，让组件按Div尺寸显示sm布局？

Bootstrap的响应式断点基于浏览器视口宽度，而非父容器宽度，所以直接复用组件时，即使父容器很小，只要视口够大，仍会加载大屏布局。以下是符合DRY原则的解决方案：

1. Django模板复用+参数控制 #

不用复制组件代码，通过Django模板标签传递参数控制布局：

• 把组件封装为可复用模板（比如components/responsive-component.html），添加参数判断：

<div class="row {% if force_sm %}row-cols-1{% else %}row-cols-sm-2 row-cols-md-4{% endif %}">
  <div class="col p-3">组件内容1</div>
  <div class="col p-3">组件内容2</div>
  <!-- 更多列 -->
</div>

• 独立页面调用（默认响应式）：

{% include 'components/responsive-component.html' %}

• 首页非全屏容器中调用（强制sm布局）：

<div class="w-75 mx-auto"> <!-- 非全屏容器 -->
  {% include 'components/responsive-component.html' with force_sm=True %}
</div>

2. CSS自定义类强制布局 #

创建全局CSS类，让父容器内的组件强制应用sm断点样式：

/* 强制组件使用sm级别的两列布局 */
.force-sm-layout .row > .col {
  flex: 0 0 auto;
  width: 50%; /* 对应col-sm-6的宽度 */
}

/* 如果要强制堆叠（xs/sm下的单列布局） */
.force-xs-layout .row > .col {
  flex: 0 0 auto;
  width: 100%;
}

然后在首页的父容器上添加该类，直接复用组件：

<div class="non-fullscreen-div force-sm-layout">
  {% include 'components/responsive-component.html' %}
</div>

3. SCSS进阶方案（若使用Bootstrap源文件） #

如果项目基于Bootstrap SCSS开发，可通过内置混合宏实现更精准的强制布局：

.force-sm-layout {
  @include media-breakpoint-up(md) {
    /* 当视口大于md断点时，强制应用sm的布局规则 */
    .row {
      @include make-row();
      .col {
        @include make-col-ready();
        @include make-col(6); /* 匹配col-sm-6的宽度 */
      }
    }
  }
}

编译后给父容器添加force-sm-layout类即可。

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