Bootstrap列布局适配容器尺寸：如何让列随容器大小堆叠

核心问题出在：你用的col-lg-6是基于屏幕视口宽度的响应式类，只有当屏幕宽度小于lg断点（默认992px）时才会堆叠。但把组件放到侧边栏这类小容器里时，哪怕屏幕尺寸够大，只要父容器宽度不够，你需要让列跟着父容器大小走，而不是盯着视口尺寸。

下面是几个可行的解决方案：

方案1：改用无断点的弹性布局类 #

直接放弃固定的col-lg-6，用Bootstrap的flex工具类让列自动适配父容器：

<div class="container">
  <div class="d-flex flex-wrap">
    <!-- 用col类自动平分宽度，父容器空间不足时自动堆叠 -->
    <div class="col">内容1</div>
    <div class="col">内容2</div>
  </div>
</div>

• d-flex flex-wrap：让父容器变成弹性容器，空间不够时自动换行
• col：自动平分父容器宽度，当父容器窄到容不下两个列的最小宽度时，就会自动垂直堆叠

方案2：给父容器加自定义媒体查询 #

如果想保留原有视口响应逻辑，同时在父容器较小时强制堆叠，可以给父容器加个自定义类，再写CSS：

1. HTML修改：

<div class="container sidebar-container">
  <div class="row">
    <div class="col-lg-6">内容1</div>
    <div class="col-lg-6">内容2</div>
  </div>
</div>

2. 自定义CSS（假设侧边栏最大宽度是400px）：

@media (max-width: 400px) {
  .sidebar-container .col-lg-6 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

这样只要父容器宽度小于400px，列就会占满整行堆叠，不影响大屏幕下的正常显示。

方案3：自定义列类控制宽度 #

如果需要更精确的宽度控制，自己写个列类：

.custom-half-col {
  flex: 0 0 50%;
  max-width: 50%;
}
/* 当父容器窄到400px以下时，强制占满整行 */
@media (max-width: 400px) {
  .custom-half-col {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

然后HTML里替换掉col-lg-6：

<div class="container">
  <div class="row flex-wrap">
    <div class="custom-half-col">内容1</div>
    <div class="custom-half-col">内容2</div>
  </div>
</div>

总结 #

最省心的是方案1，用col+flex-wrap就能让列自动跟着父容器大小调整；如果要精确控制父容器的宽度阈值，方案2或3更合适。

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