为何Bootstrap 6列网格未水平对齐反而出现内容重叠？

你的代码里Bootstrap网格结构（row包裹两个col-12 col-md-6）本身是正确的，出现重叠的核心原因是内部图片未做响应式处理，以及可能存在的自定义样式冲突，解决步骤如下：

• 给图片添加Bootstrap内置的img-fluid类，让图片自适应容器宽度，避免超出列的范围：

  <img src="https://d1tgh8fmlzexmh.cloudfront.net/ccbp-responsive-website/ecommerce-trending-blogs-1-img.png" class="keyboard img-fluid">
  

• 检查自定义样式（比如.keyboard、.box-1）：如果设置了固定宽度（如width: 800px）、脱离文档流的定位（如position: absolute），会导致内容溢出列，需要调整为相对宽度或移除冲突属性。
• 确保row和col的默认内外边距未被覆盖：Bootstrap的row有负margin，col有padding来实现间距，若自定义CSS重置了这些属性，会破坏网格布局。

修改后的完整代码示例：

<!DOCTYPE html>
<html>
   <head>
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous" />
      <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
      <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
      <script src="https://kit.fontawesome.com/55fbb5a005.js" crossorigin="anonymous"></script>
   </head>
   <body>
      <div class="container-fluid ">
         <div class="row">
            <div class="col-12 col-md-6 p-3">
               <img src="https://d1tgh8fmlzexmh.cloudfront.net/ccbp-responsive-website/ecommerce-trending-blogs-1-img.png" class="keyboard img-fluid">
               <div class="shadow p-3 box-1">
                  <h5 class="sub-head">Fountain Pens</h5>
                  <h2 class="head">Guide to Fountain Pen Nibs</h2>
                  <p class="para">If you're having trouble with a fountain pen, whether it is scratchy, too dry, or too wet...</p>
                  <p><span class="change">Read More <i class="fa-sharp fa-regular fa-arrow-right"></i></span></p>
               </div>
            </div>
            <div class="col-12 col-md-6 p-3">
               <img src="https://d1tgh8fmlzexmh.cloudfront.net/ccbp-responsive-website/ecommerce-trending-blogs-2-img.png" class="keyboard img-fluid">
               <div class="shadow p-3 box-1">
                  <h5 class="sub-head">Productivity</h5>
                  <h2 class="head">How to Craft a Better Todo List</h2>
                  <p class="para">A well-crafted todo list acts as a guiding light for your day. It helps you overcome...</p>
                  <p><span class="change">Read More <i class="fa-sharp fa-regular fa-arrow-right"></i></span></p>
               </div>
            </div>
         </div>
      </div>
   </body>
</html>

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