Bootstrap布局问题：列内4个div无法垂直堆叠且尺寸不一致

看起来你是想用Bootstrap实现两列布局（大屏下），每列垂直放置4个div，但遇到了尺寸不一致和部分div并排的问题，我来帮你一步步解决：

1. 先解决Div并排的问题：确保列内元素垂直堆叠 #

你的代码里indexNPrt2MidSlider作为列内的容器，可能因为默认样式或自定义CSS变成了横向flex布局，导致里面的div并排。可以直接给这个容器加上Bootstrap的flex垂直排列类：

<div class="indexNPrt2MidSlider d-flex flex-column gap-3">
  <!-- 这里放你的4个ylwTpBx div -->
</div>

• d-flex flex-column：强制容器内元素垂直排列
• gap-3：给每个div之间添加间距（可选，根据需求调整数值）

如果不想用flex，只要确保indexNPrt2MidSlider没有设置display: flex; flex-direction: row;，默认的block布局下，div会自动垂直堆叠。

2. 统一Div的尺寸：让所有div大小一致 #

导致尺寸不一致的核心原因是每个div内的内容高度/宽度不同，我们可以用两种方式解决：

方法一：用Bootstrap内置类快速统一 #

给每个ylwTpBx div添加h-100和w-100，让它们占满父容器的可用空间：

<div class="ylwTpBx wlwTpBx clearfix pointer h-100 w-100">...</div>

• h-100：高度100%继承父容器
• w-100：宽度100%占满父容器

如果希望列内的4个div平分高度，可以给indexNPrt2MidSlider再加一个flex-fill，同时每个div加flex-fill：

<div class="indexNPrt2MidSlider d-flex flex-column flex-fill">
  <div class="ylwTpBx wlwTpBx clearfix pointer flex-fill">...</div>
  <!-- 其他3个div同样加flex-fill -->
</div>

方法二：自定义CSS固定尺寸 #

如果需要更精确的控制，直接给ylwTpBx类添加统一的宽高样式：

.ylwTpBx {
  width: 100%; /* 占满列宽 */
  min-height: 220px; /* 根据你的内容调整最小高度 */
  /* 可选：如果要让内容溢出时滚动 */
  overflow-y: auto;
}

3. 优化栅格布局确保响应式 #

如果希望在中等屏幕甚至小屏幕上也保持两列，可以扩展col类的断点：

<div class="col-lg-6 col-md-6 flex-first">

这样在平板（md断点）以上都是两列，小屏幕自动变成单列，且div依然垂直堆叠。

最后检查一下你的结构，确保每个col-lg-6里确实只放了4个div，没有额外的嵌套错误，这样就能实现你想要的效果啦！

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