如何在Bootstrap 3中正确让div容器靠右贴合右侧无多余间隙

问题原因分析 #

出现右侧间隙主要有3个常见原因：

1. flex父容器没有给两个子项（Books、Films容器）配置正确的弹性分配规则，子项默认不会撑满剩余宽度
2. 代码中m-r-card类默认携带右外边距，导致Films容器右侧留出了额外间距
3. Bootstrap 3的container类默认有固定宽度+左右15px内边距，会强制内容不贴边

具体解决方案 #

第一步：修正重复ID问题

你目前两个容器都用了同一个id="training-kit"，id属性要求页面唯一，先把Films容器的id改成其他值，比如training-kit-film，同时新增一个专属类film-container方便后续样式控制。

第二步：调整flex子项分配规则

给flex容器的直接子项加弹性属性，让两个容器自动填满父级宽度：

.flex-kit-game-shop-main > div {
  flex: 1;
  /* 若不需要两列等分，可改为固定占比，比如 flex: 0 0 50% 强制各占一半 */
}

第三步：清除Films容器的多余右外边距

给Films容器内的card元素新增类no-right-margin，单独清除它的右外边距，不影响其他卡片：

.no-right-margin {
  margin-right: 0 !important;
}

第四步：调整Bootstrap container的默认边距

Films容器内的tab-pane用了container类，要贴边的话可以覆盖它的默认样式：

.film-container .tab-pane.container {
  width: 100% !important;
  padding-right: 0 !important;
}

如果还是有间隙，可以再给film-container本身加padding-right:0即可，完全不需要用负margin，不会影响内部商品元素的尺寸。

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