如何在不触发 flex-wrap 的情况下在 Bootstrap 张卡片之间添加边距？

Question

我正在使用 Bootstrap 卡片，我想用 2px 的边距将它们分开。

尽管如此，当我应用它时（使用 Bootstrap 的边距类或直接在我的样式表上）flex-wrap 触发器和卡片向下一行。

我该如何处理这种行为？

我应该给卡片指定最大宽度吗？

.dark-theme body,
.dark-theme .card {
  background-color: #121212;
  color: #ffffffa6;
}

.dark-theme section.card {
  background-color: #464646;
}

.card {
  border-width: 0;
  margin: 3px;
}

main {
  padding: 100px;
}

h1 {
  text-align: center;
}

h2,
.card {
  margin-top: 20px;
}

.dark-theme .btn {
  background-color: salmon;
  border-color: salmon;
}

<head>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>

<div class="highlights row">
  <section class="card col-md-6 col-lg-4">
    <h3>Where does it come from?</h3>
    <p>
      orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
    </p>
    <p>orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
    <a href="#" class="card__btn btn btn-info">when an unknown</a>
  </section>

  <section class="card col-md-6 col-lg-4">
    <h3>Where does it come from?</h3>
    <p>
      orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
    </p>
    <p>
      orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
    </p>
    <a href="#" class="card__btn btn btn-info">
                  when an unknown
                </a>
  </section>

  <section class="card col-md-6 col-lg-4">
    <h3>Where does it come from?</h3>
    <p>
      orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
    </p>
    <p>orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
    <a href="#" class="card__btn btn btn-info">
                  when an unknown
                </a>
  </section>

Answer 1

首先，删除 Bootstrap classes 上设置的所有页边距。 Bootstrap 旨在不需要添加 spacing/sizing，因为它内置于 classes.

我re-worked你的结构有点。主要是尝试按照 Bootstrap 的建议构建元素。话虽如此，不要将每张卡片分成几部分。相反，将它们嵌套在 div 中。 The <section> tag defines a section in a document. & 如果我没记错的话，排成一排的三张卡片可以算作一个部分。我将所有三张卡片嵌套在一个部分中，并将其命名为 highlights class 你已经有了。

col的功能是为某些内容保留space的方法。因此，对于 three-card 设置，您应该使用 col-4。最大的列是 col-12，横跨屏幕的整个宽度。 12/4 = 3。然后您可以使用 sm lg 和 md 来提高媒体屏幕的响应速度。上面的示例使用预定义的网格 classes 在小型、中型、大型和 extra-large 设备上创建了三个 equal-width 列。这些列以 row 父级的页面为中心。

话虽如此，您的代码未按预期工作的主要原因是额外的 CSS 边距以及 cards 应该嵌套在 col 中。最后，如前所述滥用列大小。

我建议复习 Bootstrap Grid System。如果您知道 Bootstrap.

，您可以在 CSS 中建立一个完全响应的网站

.dark-theme body,
.dark-theme .card {
  background-color: #121212;
  color: #ffffffa6;
}

.dark-theme section.card {
  background-color: #464646;
}

.card {
  border-width: 0;
}

main {
  padding: 100px;
}

h1 {
  text-align: center;
}

.dark-theme .btn {
  background-color: salmon;
  border-color: salmon;
}

<head>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<section class="highlights">
  <div class="row w-100 m-0 justify-content-center">

    <div class="col-lg-4 col-md-4 col-sm-4">
      <div class="card w-100">
        <h3>Where does it come from?</h3>
        <p>
          orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
        </p>
        <p>orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
        <a href="#" class="card__btn btn btn-info">when an unknown</a>
      </div>
    </div>

    <div class="col-lg-4 col-md-4 col-sm-4">
      <div class="card w-100">
        <h3>Where does it come from?</h3>
        <p>
          orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
        </p>
        <p>
          orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
        </p>
        <a href="#" class="card__btn btn btn-info">
      when an unknown
      </a>
      </div>
    </div>

    <div class="col-lg-4 col-md-4 col-sm-4">
      <div class="card w-100">
        <h3>Where does it come from?</h3>
        <p>
          orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
        </p>
        <p>orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
        <a href="#" class="card__btn btn btn-info">
    when an unknown
    </a>
      </div>
    </div>
  </div>
</section>

Answer 2

这里，可以在Bootstrap网格系统中使用Guttersclass

间距是列内容之间的间隙，由水平填充创建。我们在每一列上设置 padding-right 和 padding-left，并使用负边距来在每行的开头和结尾偏移以对齐内容。

您可以根据需要在行中使用g-1、g-2、g-3、g-4和g-5。

.dark-theme body, .dark-theme .card {background-color: #121212; color: #ffffffa6;}
.dark-theme section.card {background-color: #464646;}
.card {border-width: 0;}
main {padding: 100px;}
h1 {text-align: center;}
.dark-theme .btn {background-color: salmon;border-color: salmon;}

<head>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<section class="highlights">
  <div class="row justify-content-center g-1">

    <div class="col-lg-4 col-md-4 col-sm-4">
      <div class="card">
        <h3>Where does it come from?</h3>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
        <a href="#" class="card__btn btn btn-info">when an unknown</a>
      </div>
    </div>

    <div class="col-lg-4 col-md-4 col-sm-4">
      <div class="card">
        <h3>Where does it come from?</h3>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p><a href="#" class="card__btn btn btn-info">when an unknown</a>
      </div>
    </div>

    <div class="col-lg-4 col-md-4 col-sm-4">
      <div class="card">
        <h3>Where does it come from?</h3>
        <p>orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p><p>orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
<a href="#" class="card__btn btn btn-info">when an unknown</a>
      </div>
    </div>
  </div>
</section>

如何在不触发 flex-wrap 的情况下在 Bootstrap 张卡片之间添加边距？

How to add margin between Bootstrap cards without triggering flex-wrap?

css

flexbox

twitter-bootstrap

bootstrap-5