代码之家 › 专栏 › 技术社区 › Jankapunkt

bootstrap 4组件具有与卡相同的填充,不带自定义CSS

bootstrap-4 twitter-bootstrap css

Jankapunkt · 技术社区 · 5 年前

我把元素放在我的卡片上,就像这样(运行代码片段):

<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来使卡片主体透明。

是否有一个组件或布局实用程序与卡组件具有完全相同的填充?

3 回复 | 直到 5 年前

Carol Skelly 5 年前

不幸的是 Padding Utilities 单凭这张卡是不行的 1.25rem padding和padding实用程序的范围是 1rem 到 1.5rem . 以下是一些解决方案…

选项1:

你可以使用 px-3 ( 1雷姆 )加上单利: 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

注意这仍然是一个像素关闭两边,因为卡有一个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>

Demo 2

Nikola Kostov 5 年前

你可以试着这样做,尽管这不是一个好的做法

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

Nicolas Roehm 5 年前

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