如何让Bootstrap网格根据容器尺寸动态调整列宽实现垂直堆叠？

你需要的是不依赖屏幕尺寸、仅根据容器宽度调整列布局的响应式效果，以下是三种可行的实现方式：

方案1：CSS容器查询（现代浏览器首选） #

CSS容器查询是专门针对容器尺寸的响应式方案，无需依赖屏幕媒体查询。只需给父容器开启容器查询功能，再根据容器宽度设置列的样式：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">

<!-- 常规容器效果 -->
<div class="container">
  <div class="row column-container">
    <div class="col-md-4 responsive-col" style="background-color: red;">
      Content 1
    </div>
    <div class="col-md-4 responsive-col" style="background-color: green;">
      Content 2
    </div>
    <div class="col-md-4 responsive-col" style="background-color: blue;">
      Content 3
    </div>
  </div>
</div>

<!-- 小容器自动堆叠 -->
<div class="container" style="width: 20%;">
  <div class="row column-container">
    <div class="col-md-4 responsive-col" style="background-color: red;">
      Content 1
    </div>
    <div class="col-md-4 responsive-col" style="background-color: green;">
      Content 2
    </div>
    <div class="col-md-4 responsive-col" style="background-color: blue;">
      Content 3
    </div>
  </div>
</div>

对应的CSS代码：

.column-container {
  container-type: inline-size; /* 启用容器查询 */
}

/* 当容器宽度小于600px时，列占满整行 */
@container (max-width: 600px) {
  .responsive-col {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

当容器宽度不足600px时，列会自动垂直堆叠；空间充足时保持横向并排，完全基于容器尺寸判断，不受屏幕大小影响。

方案2：Flexbox最小宽度适配（兼容旧浏览器） #

如果需要兼容不支持容器查询的旧浏览器，可以利用Flexbox的自动换行特性，给列设置最小宽度，当容器无法容纳所有列的最小宽度时，自动换行：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">

<style>
  .flex-adaptive .flex-col {
    min-width: 200px; /* 可根据需求调整列的最小宽度 */
    flex: 1; /* 空间充足时自动均分宽度 */
  }
</style>

<!-- 常规容器效果 -->
<div class="container">
  <div class="row flex-adaptive d-flex flex-wrap">
    <div class="flex-col" style="background-color: red;">
      Content 1
    </div>
    <div class="flex-col" style="background-color: green;">
      Content 2
    </div>
    <div class="flex-col" style="background-color: blue;">
      Content 3
    </div>
  </div>
</div>

<!-- 小容器自动堆叠 -->
<div class="container" style="width: 20%;">
  <div class="row flex-adaptive d-flex flex-wrap">
    <div class="flex-col" style="background-color: red;">
      Content 1
    </div>
    <div class="flex-col" style="background-color: green;">
      Content 2
    </div>
    <div class="flex-col" style="background-color: blue;">
      Content 3
    </div>
  </div>
</div>

这个方案无需特殊API，靠Flexbox原生特性实现，兼容性更好，适合需要支持旧版浏览器的场景。

方案3：自定义类+条件样式（场景固定时使用） #

如果你的小容器宽度是固定场景（比如侧边栏），可以给容器添加自定义类，直接强制列堆叠：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">

<style>
  /* 针对小容器强制列堆叠 */
  .narrow-container .col-md-4 {
    flex: 0 0 100%;
    max-width: 100%;
  }

  /* 当容器足够宽时恢复原有布局 */
  @media (min-width: 768px) {
    .narrow-container.wide .col-md-4 {
      flex: 0 0 33.3333%;
      max-width: 33.3333%;
    }
  }
</style>

<!-- 常规容器 -->
<div class="container">
  <div class="row">
    <div class="col-md-4" style="background-color: red;">
      Content 1
    </div>
    <div class="col-md-4" style="background-color: green;">
      Content 2
    </div>
    <div class="col-md-4" style="background-color: blue;">
      Content 3
    </div>
  </div>
</div>

<!-- 小容器 -->
<div class="container narrow-container" style="width: 20%;">
  <div class="row">
    <div class="col-md-4" style="background-color: red;">
      Content 1
    </div>
    <div class="col-md-4" style="background-color: green;">
      Content 2
    </div>
    <div class="col-md-4" style="background-color: blue;">
      Content 3
    </div>
  </div>
</div>

这个方案简单直接，适合已经明确小容器应用场景的情况。

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