Bootstrap 5中col-md-5元素右侧边距无法消除的问题求助

开发网站模板时遇到Bootstrap 5布局问题：使用flex布局时，元素右侧存在无法消除的空白区域。尝试为col元素设置margin:0、将col-md-4改为col-md-3等操作后，问题仍未解决。期望实现白色div与文本右侧对齐。

问题代码片段 #

<div class="container-fluid block_product" style="background:#fff;width: 50%;margin-left: 60px; /* Override Bootstrap's default margin */padding: 0px; /* Override Bootstrap's default padding */">
 <div class="row" style="margin-right: 0 !important; margin-left: 0 !important;">
    <div class="col-md-4 services-products" style="padding: 0;">
       <div class="col d-flex align-items-center justify-content-center">
          <div><img class="lazyload " src="//bewens.myshopify.com/cdn/shop/files/anissa_kermiche_reine_14_karat_gold_diamond_and_pearl_earring_1_large.jpg?v=1713833565"></div>
           </div>
               </div>
                 <div class="col-md-5">
                   <div class="text-left">
                     <div class="home-section-1-product-col-2">
                          <p class="home-section-1-product-title-1">title one</p>
                               <p class="home-section-1-product-title-2">
                                   </p><p>Our devoted clients have noticed </p>
                                    </div>
                                    <div class="home-section-1-product-price">
                                        <p class="home-section-1-product-price-h2">
                                            99.00 IN
                                        </p>
                                    </div>
                                    <p class="section-1-product-strike text-center" style="margin-bottom: 0 !important;">
                                    ANKUBA-TU <strike> 130.00 IN
                                    </strike></p> 
                                    <div class="d-grid gap-2"><button class="py-md-3-custom btn btn-primary py-md-3 px-md-5 me-3 " style="margin-bottom: 10px !important;">Découvrez </button></div>
                                </div>
                            </div>
                            
                        </div>
                    </div>

问题截图 #

解决方法 #

问题根源

1. 栅格列未占满行宽：Bootstrap栅格基于12列体系，当前代码中col-md-4 + col-md-5 = 9，剩余3列宽度就是你看到的右侧空白，并非边距。
2. 布局嵌套错误：col-md-4内部直接嵌套col，违反Bootstrap规则（col必须是row的直接子元素），会引发额外布局冲突。
3. 容器宽度限制：外层container-fluid设置了width:50%，但内部列未适配该宽度比例。

修正步骤

1. 修复嵌套结构：将col-md-4内的col替换为普通div，保留flex布局类：

   <div class="d-flex align-items-center justify-content-center">
   

2. 调整列宽占满行：将两列宽度调整为总和12，比如col-md-5 + col-md-7，确保填满row：

   <div class="col-md-5 services-products" style="padding: 0;">
   ...
   <div class="col-md-7">
   

3. 对齐右侧内容：如果要让白色div（.block_product）与文本右侧对齐，要么去掉container-fluid的width:50%，要么让内部列适配这个50%宽度，比如用col-6和col-6等分比例，或者给文本列加flex-grow-1类自动占满剩余空间。

修改后的完整代码示例

<div class="container-fluid block_product" style="background:#fff;width: 50%;margin-left: 60px;padding: 0;">
 <div class="row" style="margin-right: 0 !important; margin-left: 0 !important;">
    <!-- 修复嵌套并调整列宽 -->
    <div class="col-md-5 services-products" style="padding: 0;">
       <div class="d-flex align-items-center justify-content-center">
          <div><img class="lazyload " src="//bewens.myshopify.com/cdn/shop/files/anissa_kermiche_reine_14_karat_gold_diamond_and_pearl_earring_1_large.jpg?v=1713833565"></div>
       </div>
    </div>
    <!-- 调整列宽并添加flex-grow确保占满剩余空间 -->
    <div class="col-md-7 flex-grow-1">
       <div class="text-left">
         <div class="home-section-1-product-col-2">
              <p class="home-section-1-product-title-1">title one</p>
              <p>Our devoted clients have noticed </p>
         </div>
         <div class="home-section-1-product-price">
             <p class="home-section-1-product-price-h2">
                 99.00 IN
             </p>
         </div>
         <p class="section-1-product-strike text-center" style="margin-bottom: 0 !important;">
             ANKUBA-TU <strike> 130.00 IN </strike>
         </p> 
         <div class="d-grid gap-2">
             <button class="py-md-3-custom btn btn-primary py-md-3 px-md-5 me-3 " style="margin-bottom: 10px !important;">Découvrez </button>
         </div>
       </div>
    </div>
 </div>
</div>

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