如何保留Bootstrap col-lg-8/4布局，放大卡片并缩减留白？

最优解决方案 #

利用Bootstrap原生的 gutter 控制类，在不修改核心栅格列宽度、不破坏响应式的前提下实现需求：

1. 调整行的横向间距：给包裹两列的.row添加gx-lg-0类，仅在大屏幕（lg及以上）移除列之间的默认横向 gutter（Bootstrap 默认 gutter 为1.5rem/24px），小屏幕保留默认 gutter 避免元素重叠。
2. 保留卡片右侧内边距：维持卡片已设置的padding-right:20px，这将成为卡片与Banner之间的精确间距。
3. 让图片填满列宽：给卡片内的图片设置width:100%; height:auto;，使其完全填满col-lg-8的宽度，达到目标红线位置。

代码示例

<!-- 修改后的行结构 -->
<div class="row gx-lg-0">
  <div class="col-lg-8">
    <div class="card" style="padding-right:20px;">
      <img src="your-image-path" class="card-img-top" alt="Card image">
      <!-- 卡片其他内容 -->
    </div>
  </div>
  <div class="col-lg-4">
    <div class="banner" style="text-align:right;">
      <!-- Banner内容 -->
    </div>
  </div>
</div>

/* 确保图片填满列宽 */
.card .card-img-top {
  width: 100%;
  height: auto;
}

原有方案问题分析 #

1. 设置卡片width:105%：硬编码百分比会破坏响应式布局，窗口缩小时卡片会超出容器，与Banner重叠或丢失内边距，无法适配多屏幕尺寸。
2. 修改Bootstrap原生列宽：直接修改.col-lg-8的宽度为75%会破坏栅格系统的一致性，后续升级Bootstrap或复用组件时极易出现兼容性问题，不符合前端工程化规范。
3. 移除Banner的text-align:right：仅让Banner左移，但会导致Banner右侧出现不必要的留白，破坏整体布局的对齐逻辑，属于治标不治本的方案。

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