为何Bootstrap中row元素垂直溢出外层div容器？

咱们先拆解下问题的核心：你给外层.latestQuestions设置了固定height:400px，里面直接放了文本Latest Questions和带h-100类的row。h-100会强制row高度等于父元素的400px，再加上前面文本占据的高度，整个内容总高度就超过了外层div的限制，而外层div默认overflow:visible，所以row就会向下溢出，直接覆盖掉下面的<p>OK</p>。

另外你之前设置的box-sizing: border-box解决了水平溢出（抵消row的左右负边距），但垂直方向的问题和这个属性无关。

下面给你几个实用的解决方案：

方案1：用Flex布局让Row占据剩余高度（推荐） #

利用Bootstrap 4原生的flex工具类，让外层div变成垂直方向的flex容器，这样row可以自动占据除标题外的剩余高度，不会超出外层div的400px限制：

<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<style>
.latestQuestions{ height: 400px; }
</style>
</head>
<div class="bg-info latestQuestions container d-flex flex-column">
  <div>Latest Questions</div> <!-- 把标题单独放在容器里，方便flex分配空间 -->
  <div class="bg-primary flex-grow-1 row">
    <div class="col-sm">col1</div>
    <div class="col-sm">col2</div>
    <div class="col-sm">col3</div>
  </div>
</div>
<p>OK</p>

关键细节：

• 外层div加d-flex flex-column，将其转为垂直方向的flex容器
• 给row加flex-grow-1，让它自动填充容器内剩余的垂直空间
• 标题单独封装，避免和row混在一起干扰高度计算

方案2：移除h-100并给外层加滚动条 #

如果你不需要row占满剩余高度，只是不想它溢出覆盖下方内容，可以直接移除h-100类，同时给外层div加overflow-auto，超出部分会显示滚动条，不会影响外部元素：

<div class="bg-info latestQuestions container overflow-auto">
Latest Questions
<div class="bg-primary row">
<div class="col-sm">col1</div>
<div class="col-sm">col2</div>
<div class="col-sm">col3</div>
</div>
</div>
<p>OK</p>

方案3：手动计算Row高度（不推荐，灵活性差） #

如果一定要保留h-100的效果，可以给外层div预留标题高度，再用calc()计算row的高度，但这种方法需要手动适配标题高度，不够灵活：

.latestQuestions{ 
  height: 400px; 
  padding-top: 2rem; /* 预留标题的高度 */
  position: relative;
}
.latestQuestions .title{
  position: absolute;
  top: 0;
  left: 15px; /* 对齐container的默认内边距 */
}
.latestQuestions .row{
  height: calc(100% - 2rem); /* 减去标题占用的高度 */
  box-sizing: border-box;
}

对应的HTML：

<div class="bg-info latestQuestions container">
  <div class="title">Latest Questions</div>
  <div class="bg-primary row">
    <div class="col-sm">col1</div>
    <div class="col-sm">col2</div>
    <div class="col-sm">col3</div>
  </div>
</div>
<p>OK</p>

优先推荐方案1，它用Bootstrap原生类实现，代码简洁且适配性强，既能解决溢出问题，又能让row合理占据剩余空间。

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