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

不幸的是，仅Padding Utilities无效，因为卡具有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>

Demo 1

请注意，由于卡的边框为1像素，因此两侧仍然相距1像素。要解决此问题，您必须在顶部内容上添加一个不可见的边框（例如：<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>

Demo 2

Answer 2

尽管这不是一个好习惯，您也可以尝试这样

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

Answer 3

是的，您可以组合以下类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>

具有相同填充（如卡）且没有自定义CSS的Bootstrap 4组件

3 个答案: