Bootstrap 4+ flex-row子元素移动端全屏展开实现方案

你可以通过以下几种方式，在保留父容器d-flex flex-row类的前提下，让子元素在移动端（小屏）完全展开：

方法1：使用Bootstrap内置响应式类（推荐） #

给父容器添加flex-wrap类允许换行，同时给子元素设置小屏时占满宽度的响应式宽度类：

<div class="d-flex flex-row flex-wrap">
  <div class="some-class w-100 w-sm-auto">Item 1</div>
  <div class="some-class w-100 w-sm-auto">Item 2</div>
  <div class="some-class w-100 w-sm-auto">Item 3</div>
</div>

说明： #

• flex-wrap：让父容器在空间不足时自动换行，避免子元素挤在一行
• w-100：在**xs屏（<576px）**时子元素宽度占满100%，实现完全展开
• w-sm-auto：在**sm屏及以上（≥576px）**时恢复子元素宽度自适应，保持原来的多列布局

方法2：自定义媒体查询CSS #

如果不想额外修改父容器的类（仅保留d-flex flex-row），可以通过媒体查询强制小屏时子元素占满宽度并允许父容器换行：

/* 针对移动端（<576px）的媒体查询 */
@media (max-width: 575.98px) {
  .d-flex.flex-row {
    flex-wrap: wrap; /* 允许换行 */
  }
  .d-flex.flex-row .some-class {
    width: 100%; /* 子元素占满一行 */
  }
}

原问题原因： #

默认情况下flex-row对应的flex-wrap值是nowrap，所以小屏时子元素会被强制挤在同一行，不会自动换行展开。通过开启flex-wrap并设置子元素宽度为100%，就能实现移动端的单行展开效果。

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