如何让Bootstrap换行后的列拉伸至容器全宽？

咱们先明确问题根源：你用的.col-2、.col-5这些类是固定百分比宽度的，当容器宽度缩小到总列宽超过容器时，列会自动换行，但换行后的列依然保持原本的百分比宽度，自然没法填满剩余空间。下面给你几个实用的解决方案：

方案一：利用Flexbox的flex-grow属性覆盖默认样式 #

既然你已经自定义了.my-row和.my-col，可以直接给.my-col添加flex-grow: 1，让换行后的列自动拉伸填满剩余空间：

.my-row { 
  justify-content: stretch; 
} 
.my-col { 
  background: yellowgreen; 
  border: 1px gray solid; 
  align-self: stretch;
  flex-grow: 1; /* 新增这一行，让列自动填充剩余空间 */
  min-width: 100px; /* 可选：设置最小宽度，避免列被压缩得太窄 */
}

这个方案最贴合你的需求——大屏幕下保持原布局，小屏幕换行后列自动填满容器剩余宽度，无需修改HTML结构。

方案二：改用Bootstrap原生响应式栅格类 #

如果你想遵循Bootstrap的原生逻辑，可以针对小屏幕设置全宽列，比如添加.col-12的响应式变体：

<div class="container my-container"> 
  <div class="row m-row justify-content-between"> 
    <div class="col-2 col-xs-12 my-col">One of three columns</div> 
    <div class="col-5 col-xs-12 my-col">One of three columns</div> 
    <div class="col-5 col-xs-12 my-col">One of three columns</div> 
  </div> 
</div>

不过这个方案是让小屏幕下所有列直接占满整行宽度，和你想要的“换行后填满剩余宽度”逻辑略有不同，适合需要完全响应式切换的场景。

方案三：自定义媒体查询做精准适配 #

如果需要更精细的控制，可以用媒体查询在特定屏幕尺寸下调整列的表现：

.my-row { 
  justify-content: stretch; 
} 
.my-col { 
  background: yellowgreen; 
  border: 1px gray solid; 
  align-self: stretch;
}

/* 当容器宽度小于150px时（匹配你的模拟场景） */
@media (max-width: 150px) {
  .my-col {
    flex: 1 1 100%; /* 强制列占据整行宽度 */
  }
}

这个方案可以精准控制不同屏幕尺寸下的列布局，适合有特定适配需求的场景。

效果验证 #

你可以把.my-container的宽度设为150px测试，用方案一的话，换行后的列会自动拉伸填满容器，完美解决你的问题~

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