如何消除Bootstrap卡片内并排列的水平间隙？

Let’s break down why you’re seeing those gaps and fix it step by step:

The Root Causes #

Your issue stems from two default Bootstrap styles that clash with your layout:

1. .card-header has built-in horizontal padding that pushes your row inward, creating gaps at the edges.
2. .row uses negative horizontal margins, and .col-6 has default horizontal padding — this adds unwanted space between your images, and causes overflow if you remove .card-header padding without adjusting the row.

Step-by-Step Fix #

Apply these targeted changes to your code:

1. Add px-0 to .card-header to strip its default horizontal padding, letting content reach the card’s outer edges.
2. Replace your plain .row with .row no-gutters — this Bootstrap class removes the row’s negative margins (preventing image overflow) and all column horizontal padding (eliminating gaps between the two images).
3. Optional: Add rounded-top-left to the left image and rounded-top-right to the right image. While the .card-header’s rounded-top should crop images correctly, this ensures perfect alignment with the card’s corners in edge cases.

Modified Code #

<div class="d-flex align-items-stretch col-6 col-sm-6 col-md-4 col-lg-4 col-xl-4 p-2 ">
 <!-- Card -->
 <a href="https://www.example.com" class="card w-100 bg-white text-dark border-1 shadow-sm rounded-top rounded-bottom">
 <div class="card-header bg-white pb-0 pt-0 border-top px-0">
 <div class="row no-gutters">
 <div class="col-6 bg-success p-0">
 <img src="http://res.cloudinary.com/braincloud/image/fetch/w_300,h_300,c_thumb,g_faces/http://www.example.com/wp-content/uploads/groupm-dominic-grainger-thumbnail-1024x576.jpg" class="w-100 rounded-top-left">
 </div>
 <div class="col-6 p-0">
 <img src="https://logo.clearbit.com/groupm.com" class="img-fluid w-100 logocenter rounded-top-right">
 </div>
 </div>
 </div>
 <!-- Title -->
 <div class="card-body pb-0 pt-2 mt-0">
 <p class="card-title pt-2 font-weight-normal">How Europe Can Hit Addressable Scale: Grainger, GroupM</p>
 </div>
 <!-- Date -->
 <div class="card-footer bg-white text-muted small pt-0 border-top-0">Dec 13, 2018</div>
 </a>
 <!-- end .card -->
 </div>

Why This Works #

• px-0 on .card-header removes internal horizontal padding so your images can touch the card’s outer edges directly.
• no-gutters resolves the row/column spacing conflict: it eliminates the row’s negative margins (so images don’t spill outside the card) and column padding (so the two images sit flush against each other).
• The rounded corner classes ensure each image matches the card’s top-left and top-right curves, avoiding any awkward square edges or clipping.

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