Bootstrap div内列对齐问题：左侧多图右侧文本布局错位求助

问题根源与解决方向 #

你遇到的布局问题核心是两个原因：

• 初始代码中下方小图的列宽设置错误，两个col-3加起来仅占左侧父容器col-8的一半宽度，剩余空白导致右侧文本区域和左侧图片区域无法相邻
• Bootstrap默认的栅格系统自带gutter（栅格间距），未手动清除的话会产生多余的空白间隙

具体修改步骤 #

1. 修正小图列宽：将左侧下方两个小图所在的col-3替换为col-6，两个列加起来正好占满左侧col-8的全部宽度，消除左侧图片区域的内部留白
2. 清除默认栅格间距：给需要消除间隙的row添加g-0类，给col添加p-0类，直接清除Bootstrap自带的内边距、外边距
3. 保留图片原有尺寸：给图片添加w-auto h-auto类，替代img-responsive默认的宽度100%自适应规则，保留图片原生尺寸的同时保证比例不变
4. 微调右侧文本内边距：如果不需要完全贴边，可以给右侧文本的col添加ps-3这类微调类，控制和左侧图片的间距更美观

完整修改后代码示例 #

<style>
   #points{display:block;}
   /* 可选：统一图片最大宽度，避免超出容器 */
   .img-wrap img {
      max-width: 100%;
      height: auto;
   }
</style>
<div class="row g-0" style="border:black solid 2px; margin: 50px; padding: 10px;">
  <!-- 左侧图片区域 -->
  <div class="col-8 p-0">
     <img class="w-auto h-auto" src="http://placehold.it/450x250" alt="主图" />
    <div class="row g-0">
      <div class="col-6 p-0"> <img class="w-auto h-auto" src="http://placehold.it/210x150" alt="小图1" /></div>
      <div class="col-6 p-0"> <img class="w-auto h-auto" src="http://placehold.it/210x150" alt="小图2" /> </div>
    </div>
  </div>
  <!-- 右侧文本区域 -->
   <div class="col-4 ps-3" >
       <div class="property-wrap">
            <div class="text">
              <h3><a href="#">名称 </a></h3> 
              <ul class="property_list mt-3 mb-0">
                <li><span class="flaticon-bed"></span>3间</li>
                <li><span class="flaticon-bathtub"></span>2间</li>
                <li><span class="flaticon-blueprint"></span>1878平方英尺</li>
              </ul>
            </div>
           <div class="text">
               <p>这是示例文本，这里是一段短段落内容。这是示例文本，这里是一段短段落内容。这是示例文本，这里是一段短段落内容。</p>
               <ul > 
                <li id="points">测试项</li>
                <li id="points">测试项</li>
                <li id="points">测试项</li>
                <li id="points">测试项</li>
               </ul>
               <a class="btn btn-primary" href="#!">查看更多 →</a>
           </div>
          </div>
   </div>
</div>

如果你需要进一步压缩蓝色标注位置的间距，只需要调整右侧col-4的ps-3参数即可，比如改成ps-2甚至ps-0就能完全贴紧左侧图片区域。

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