使用Bootstrap卡片时网页右侧出现多余空白如何解决

问题原因 #

Bootstrap的row类默认带有margin-right: -15px、margin-left: -15px的负边距，用于抵消外层container/container-fluid的左右内边距，若布局层级或全局样式没有处理横向溢出，就会导致页面被撑出额外的右侧空白。

解决方法 #

按优先级选以下方案即可：

• 添加全局横向溢出隐藏
  给页面根元素添加禁止横向溢出的样式，直接拦截所有元素撑出的横向多余宽度，不会影响原本设置的卡片列间距，是适配性最高的解法：

  body {
    overflow-x: hidden;
  }
  

• 移除行的默认边距
  如果你不需要列之间的默认间距，可以给row元素添加对应版本的无间距类：
  • Bootstrap 4 版本：添加no-gutters类

    <div class="row row-cols-1 row-cols-md-3 no-gutters">
    

  • Bootstrap 5 版本：添加g-0类

    <div class="row row-cols-1 row-cols-md-3 g-0">
    

• 校验内部元素尺寸
  排查卡片内的图片、文本是否有设置超出卡片宽度的固定值，确保所有内容的最大宽度不超过父容器。

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