Bootstrap容器异常：添加内边距后行与列溢出容器的原因排查

这问题我太熟了！你遇到的是Bootstrap网格系统默认内外边距和自定义边框的冲突问题，咱们来拆解原因和解决方法：

问题根源 #

Bootstrap的.row组件默认设置了负左右margin（margin-left: -15px; margin-right: -15px），目的是抵消.col默认的左右padding（各15px），让列的内容刚好对齐容器的边缘。但当你给.container加上边框后，.row的负margin会让内部的.col（包括你给列加的蓝色点状边框）直接超出容器的边框范围，看起来就像容器“装不下”它们了。

解决方案 #

这里有几个简单有效的方法，按需选择：

方法1：给容器添加内边距（最推荐） #

直接给.container添加左右内边距，抵消.row的负margin影响，同时保留网格系统的原有间距逻辑：

<div class="container border border-dark" style="padding-left: 15px; padding-right: 15px;">
  <div class="row">
    <div class="col" style="border: dotted 1px blue">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit aliquid asperiores cumque ducimus quae facilis sit molestiae ullam nam voluptates odit accusantium fugiat corrupti non quaerat voluptatem qui,
    </div>
  </div>
  <div class="row">
    <div class="col" style="border: dotted 1px blue">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas, debitis dignissimos nostrum commodi iure optio nulla sapiente, modi voluptatibus nam, sed maxime doloribus hic quaerat perferendis ex
    </div>
    <div class="col" style="border: dotted 1px blue">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas, debitis dignissimos nostrum commodi iure optio nulla sapiente, modi voluptatibus nam, sed maxime doloribus hic quaerat perferendis ex
    </div>
    <div class="col" style="border: dotted 1px blue">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis at ea facere magni similique eveniet corrupti commodi amet id ad asperiores minus laborum necessitatibus, iusto incidunt vero deserunt qui
    </div>
  </div>
</div>

方法2：给容器添加溢出隐藏（视觉快速修复） #

如果不想调整内边距，也可以给.container加上overflow-hidden类，让超出边框的部分被隐藏：

<div class="container border border-dark overflow-hidden">
  <!-- 你的行列内容 -->
</div>

不过这个方法只是视觉上掩盖问题，并非从布局逻辑上解决，更适合临时快速处理。

方法3：自定义row的margin #

修改.row的默认负margin为0，同时调整.col的padding来适配：

<div class="container border border-dark">
  <div class="row" style="margin-left: 0; margin-right: 0;">
    <div class="col" style="border: dotted 1px blue; padding-left: 0; padding-right: 0;">
      <!-- 内容 -->
    </div>
  </div>
</div>

这个方法会改变Bootstrap网格的原有间距，需要根据需求调整，不推荐在复杂布局中使用。

试试上面的方法，应该就能完美解决容器装不下行列的问题啦！

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