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

Question

我有一张像这样的卡片...

<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">
            <div class="row">
                <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">
                </div>
                <div class="col-6 p-0">
                                                <img src="https://logo.clearbit.com/groupm.com" class="img-fluid w-100 logocenter">                </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>

那是.card-header中的两个图像。以前是一个，但现在我需要并排放置两个图像。因此，我添加了.row，其中包含两个6宽的列。

问题-图像两边都有水平间隙。我该如何摆脱呢？我希望图像到达卡的边缘（但也要由顶部的.rounded-top容纳）。

我尝试了一些事情...

在.card-header ...

上

.mx-0什么都不做

.px-0使图像在卡上流血 ...

在.row ...

上

px-0什么都不做

mx-0将行/图像缩小得太小，这与我所需要的相反。

通过Chrome浏览器的检查器查看的.card-header ...

这是.row ...

我需要更改什么？

Answer 1

我想您可以做两件事之一，用您的标记，您必须删除包含图像的row上的水平边距和填充，以及删除{{ 1}}，所有这些操作都可以通过card-header和px-0完成，但是您还必须在图像上四角，以便与卡片的其余部分完全吻合。

编辑：我注意到页眉角上的剩余空间是由于页眉顶部的2px边框所致，通过使用mx-0删除它可以得到除去空间，您只需要用与标题具有相同值的图像四舍五入即可，border-top-0

如果您可以稍微更改标记的另一种选择是使用Bootstrap 4 calc(.25rem - 1px)组件，如下所示：

card

.card-header .row .col-6:first-child img {
  border-radius: calc(.25rem - 1px) 0 0 0;
}

.card-header .row .col-6:last-child img {
  border-radius: 0 calc(.25rem - 1px) 0 0;
}