如何解决Bootstrap布局中左侧Div因右侧Div过高产生大量空白的问题

你的问题根源在于强制换行的<div class="w-100"></div>，它把第三个列推到了新行，导致右侧长内容列的下方和左侧新列的上方都出现空白。调整布局结构就能解决：

把左侧的两个内容区块合并到同一列中，让它们垂直排列，和右侧的长内容列并列，这样就不会有空隙了。修改后的代码如下：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
  <!-- 左侧列：包含两个内容区块 -->
  <div class="col-6 col-sm-6">
    <h5><b>PRODUCER MAILINGS AND IMPORTANT UPDATES</b></h5>
    <hr class="fa-border border-primary border-1" />
    <ul class="list-unstyled">
      <li onclick="location.href='mydoc'"><img border="0" src="../images/icons/pdf.jpg" />&nbsp;Name1</li>
      <li onclick="location.href='mydoc'"><img border="0" src="../images/icons/pdf.jpg" />&nbsp;name goes here</li>
    </ul>

    <!-- 第二个左侧内容区块，直接放在同一个列里 -->
    <h3><b>OTHER MANUALS AND PROCEDURES</b></h3>
    <hr class="fa-border border-primary border-1" />
    <ul class="list-unstyled">
      <li onclick="location.href='mydoc'"><img border="0" src="../images/icons/pdf.jpg" />&nbsp;name goes here</li>
    </ul>
  </div>

  <!-- 右侧长内容列 -->
  <div class="col-6 col-sm-6">
    <h3><b>XXXXXX Mitigation Credits</b></h3>
    <hr class="fa-border border-primary border-1" />
    <ul class="list-unstyled">
      <li onclick="location.href='mydoc'"><img border="0" src="../images/icons/pdf.jpg" />&nbsp;name goes here</li>
      <li onclick="location.href='mydoc'"><img border="0" src="../images/icons/pdf.jpg" />&nbsp;name goes here</li>
      <li onclick="location.href='mydoc'"><img border="0" src="../images/icons/pdf.jpg" />&nbsp;name goes here</li>
      <li onclick="location.href='mydoc'"><img border="0" src="../images/icons/pdf.jpg" />&nbsp;name goes here</li>
      <li onclick="location.href='mydoc'"><img border="0" src="../images/icons/pdf.jpg" />&nbsp;name goes here</li>
      <li onclick="location.href='mydoc'"><img border="0" src="../images/icons/pdf.jpg" />&nbsp;name goes here</li>
      <li onclick="location.href='mydoc'"><img border="0" src="../images/icons/pdf.jpg" />&nbsp;name goes here</li>
      <li onclick="location.href='mydoc'"><img border="0" src="../images/icons/pdf.jpg" />&nbsp;name goes here</li>
      <li onclick="location.href='mydoc'"><img border="0" src="../images/icons/pdf.jpg" />&nbsp;name goes herey</li>
      <li onclick="location.href='mydoc'"><img border="0" src="../images/icons/pdf.jpg" />&nbsp;name goes here</li>
      <li onclick="location.href='mydoc'"><img border="0" src="../images/icons/pdf.jpg" />&nbsp;name goes here</li>
      <li onclick="location.href='mydoc'"><img border="0" src="../images/icons/pdf.jpg" />&nbsp;name goes here</li>
      <li onclick="location.href='mydoc'"><img border="0" src="../images/icons/pdf.jpg" />&nbsp;name goes here</li>
    </ul>
  </div>
</div>

关键调整点： #

• 移除了<div class="w-100"></div>，这个元素会强制Bootstrap的行换行，把第三个列挤到新行。
• 将原来的第一个和第三个col-6合并成一个列，让两个左侧内容区块在同一列内垂直排列，和右侧列保持并列。
• 这样布局后，左侧列会根据内部两个区块的总高度自适应，右侧列的长内容也会和左侧列并列，不会在左侧下方留下空白。

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