Bootstrap 4中实现card内部盒子全宽显示 消除左右多余留白

留白产生原因 #

左右两侧多余留白来自Bootstrap Card组件默认样式的叠加：

• 外层的card-body类默认自带1.25rem左右内边距
• 内层嵌套Card的card-block类（Bootstrap 4早期版本类，正式版对应card-body）同样默认设置了左右内边距，两层内边距叠加后就形成了可见的多余空隙

修复步骤 #

直接使用Bootstrap内置的间距工具类清除冗余内边距即可，无需编写额外自定义CSS：

• 给包裹内层Card的外层card-body添加px-0类清除左右内边距；如果需要保留和上方ng-bind-html渲染内容的间距，可以搭配pt-3、pb-0类单独保留顶部内边距
• 给内层Card的card-block添加p-0类清除自身所有内边距
• 如果不需要嵌套Card的边框样式，可给内层card添加border-0类移除默认边框，视觉上和外层Card更统一
• 给内部的img-fluid图片额外添加w-100类，强制图片占满所在列的全部宽度，避免因图片原始尺寸问题产生细微缝隙

最终可用代码 #

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="card">
  <h5 class="card-header">testing</h5>
  <div class="card-body px-0 pb-0 pt-3">
    <div ng-bind-html="desc"></div>
    <div class="card border-0">
      <div class="card-block p-0">
        <div class="row no-gutters">
          <div class="col">
            <img class="img-fluid w-100" src="http://placehold.it/800x300" alt="image">
          </div>
          <div class="col">
            <img class="img-fluid w-100" src="http://placehold.it/800x300" alt="image">
          </div>
         </div>
      </div>
    </div>
  </div>
</div>

提示：如果使用Bootstrap 4正式版，建议将card-block替换为官方标准类card-body，避免版本差异导致的样式失效问题。

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