Как устранить горизонтальный зазор между соседними столбцами внутри карты 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 *. 1011 *

Проблема - есть горизонтальные промежутки с обеих сторон изображения. Как я могу избавиться от этого? Я хочу, чтобы изображения доходили до края карты (но также должны располагаться .rounded-top вверху).

Я пробовал несколько вещей ...

На .card-header ...

.mx-0 ничего не делает

.px-0 заставляет изображения кровоточить более карта ...

На .row ...

px-0 ничего не делает

mx-0 сужает строки / изображения слишком маленькими, что противоположно тому, что мне нужно ...

При просмотре через Chrome's Inspector, вот .card-header ...

А вот и .row ...

Что мне нужно изменить?

Answer 1

Я бы сказал, что вы можете сделать одну из двух вещей: с вашей разметкой вам нужно будет удалить горизонтальные поля и отступы на row, который содержит изображения, а также удалить отступы на card-header, все это можно сделать с помощью px-0 и mx-0, но вы также должны закруглить углы на изображениях, чтобы они хорошо подходили к остальной части карты.

РЕДАКТИРОВАТЬ: Я заметил, что оставшееся пространство по углам заголовка были из-за границы 2px на верхней стороне заголовка, удалив это с помощью border-top-0 вы можете избавиться от пробел, и вам просто нужно будет округлить изображения с тем же значением, что и заголовок, который является calc(.25rem - 1px)

Другая альтернатива, если вы можете немного изменить свою разметку, - использовать компонент Bootstrap 4 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;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" />

<!-- Bootstrap 4 Card -->
<div class="card" style="width: 18rem;">
  <div class="row no-gutters">
    <div class="col-6">
      <img class="w-100" src="https://via.placeholder.com/100" alt="Card image cap">
    </div>
    <div class="col-6">
      <img class="w-100" src="https://via.placeholder.com/100" alt="Card image cap">
    </div>
  </div>
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>


<!-- Your 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 border-top-0 bg-white pb-0 pt-0 border-top px-0">
      <div class="row mx-0 px-0">
        <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>