如何实现两个Bootstrap区块的响应式布局？解决溢出与填充问题

问题根源 #

• 小屏幕底部溢出：col-md在屏幕宽度<768px时会自动堆叠成100%宽度，若全局给.col设置min-height:600px，当视口高度不足600px时，区块高度超出视口就会出现溢出。
• 大屏幕无法填充空白：仅靠min-height无法让横向排列的区块自动填充父容器剩余高度，需要借助flex布局实现高度自适应。

解决方案 #

1. 调整HTML结构

给row添加h-100类（Bootstrap内置类，设置高度为视口100%），确保row撑满父容器：

<div class="container-fluid p-0">
  <div class="row h-100">
    <div class="col-md bg-primary">区块1</div>
    <div class="col-md bg-secondary">区块2</div>
  </div>
</div>

2. 修改CSS样式

移除全局.col的min-height设置，换成针对目标列的自适应样式：

/* 给目标列设置最小高度，并开启flex填充 */
.row > .col-md {
  min-height: 600px;
  flex: 1; /* 大屏幕下让列自动填充row的剩余高度 */
}

/* 小屏幕下优化高度，避免溢出 */
@media (max-width: 767px) {
  .row > .col-md {
    min-height: auto; /* 或者根据需求设置更小的最小高度，比如300px */
  }
}

3. 全局高度适配

要让h-100生效，需要确保根元素高度撑满：

html, body {
  height: 100%;
  margin: 0;
}

额外优化 #

如果需要区块内容垂直居中，直接给列添加d-flex align-items-center justify-content-center类即可：

<div class="col-md bg-primary d-flex align-items-center justify-content-center">区块1</div>

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