Компонент Bootstrap 4 с такими же дополнениями, как у карты и без пользовательских CSS

Question

Я помещаю элементы поверх моей карты следующим образом (запустите фрагмент):

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" />

<div class="container mt-4">
  <div class="clearfix">
    <span class="float-right">right</span>
    <span>left</span>
  </div>
  <div class="card">
    <div class="card-header clearfix">
      <span class="float-right">right</span>
      <span>left</span>
    </div>
    <div class="card-body">
    Sequi ad provident non. Et ea beatae ipsum sint. Quas omnis libero similique maxime perferendis pariatur aut ut. Alias quo et modi eaque. Et doloremque minima adipisci error quia rem.

Minima quibusdam sunt sint. Id perspiciatis corporis rerum sapiente ullam velit. Ratione ipsam ut voluptates iure et consequatur. Consequuntur nostrum impedit nesciunt ipsa.
    </div>
  </div>
</div>

Теперь я хочу, чтобы эти элементы отображались в том же отступе, что и содержимое карты, но без использования пользовательских CSS. Обратите внимание, что использование p-3 или px-3 или p-4 и px-4 имеет несколько отличающиеся отступы:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" />

<div class="container mt-4">
  <div class="px-4 clearfix">
    <span class="float-right">right</span>
    <span>left</span>
  </div>
  <div class="card">
    <div class="card-header clearfix">
      <span class="float-right">right</span>
      <span>left</span>
    </div>
    <div class="card-body">
    Sequi ad provident non. Et ea beatae ipsum sint. Quas omnis libero similique maxime perferendis pariatur aut ut. Alias quo et modi eaque. Et doloremque minima adipisci error quia rem.

Minima quibusdam sunt sint. Id perspiciatis corporis rerum sapiente ullam velit. Ratione ipsam ut voluptates iure et consequatur. Consequuntur nostrum impedit nesciunt ipsa.
    </div>
  </div>
</div>

Сначала я подумал о том, чтобы поместить элементы в саму карту, но затем мне пришлось бы использовать пользовательский CSS, чтобы сделать тело карты прозрачным.

Существует ли компонент или утилита компоновки, которая имеет те же отступы, что и компонент карты?

Answer 1

К сожалению, только Утилиты заполнения не будут работать, так как у карты есть заполнение 1.25rem, а значения заполнения варьируются от 1rem до 1.5rem. Вот несколько вариантов обхода ...

Вариант 1:

Вы можете использовать px-3 (1rem) плюс одно поле: mx-1 (.25rem):

<div class="container mt-4">
  <div class="px-3 mx-1 clearfix">
    <span class="float-right">right</span>
    <span>left</span>
  </div>
  <div class="card">
    <div class="card-header clearfix">
      <span class="float-right">right</span>
      <span>left</span>
    </div>
    <div class="card-body">
    ...
    </div>
  </div>
</div>

Демо 1

Обратите внимание, что это по-прежнему 1 пиксель с обеих сторон, так как карта имеет границу 1px. Чтобы обойти это, вам нужно добавить невидимую рамку в верхний контент (например: <div class="px-3 mx-1 border border-white clearfix"></div>)

Вариант 2:

Или переопределите card-header и card-body с помощью px-3 (или px-4), чтобы соответствовать отступам на верхнем содержании, делая их все одинаковыми ...

<div class="container mt-4">
  <div class="px-3">
    <span class="float-right">right</span>
    <span>left</span>
  </div>
  <div class="card">
    <div class="card-header px-3 clearfix">
      <span class="float-right">right</span>
      <span>left</span>
    </div>
    <div class="card-body px-3">
    ..
    </div>
  </div>
</div>

Демо 2

Answer 2

Да, вы можете комбинировать следующие классы mx-1 px-3 border border-white:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" />

<div class="container mt-4">
  <div class="mx-1 px-3 clearfix border border-white">
    <span class="float-right">right</span>
    <span>left</span>
  </div>
  <div class="card">
    <div class="card-header clearfix">
      <span class="float-right">right</span>
      <span>left</span>
    </div>
    <div class="card-body">
    Sequi ad provident non. Et ea beatae ipsum sint. Quas omnis libero similique maxime perferendis pariatur aut ut. Alias quo et modi eaque. Et doloremque minima adipisci error quia rem.

Minima quibusdam sunt sint. Id perspiciatis corporis rerum sapiente ullam velit. Ratione ipsam ut voluptates iure et consequatur. Consequuntur nostrum impedit nesciunt ipsa.
    </div>
  </div>
</div>

Answer 3

Вы можете попробовать вот так, хотя это не очень хорошая практика

  <div class="card-header bg-transparent py-0 border-bottom-0 clearfix">
    <span class="float-right">right</span>
    <span>left</span>
  </div>