【问题标题】：How to add margin between Bootstrap cards without triggering flex-wrap?如何在不触发 flex-wrap 的情况下在 Bootstrap 卡之间添加边距？
【发布时间】：2022-12-28 23:59:32
【问题描述】：
我正在使用 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>
【问题讨论】：
标签：
html
css
twitter-bootstrap
flexbox
bootstrap-5
【解决方案1】：
首先，删除在 Bootstrap 类上设置的任何边距。 Bootstrap 旨在不需要添加间距/大小，因为它内置在类中。
我重新设计了你的结构。主要是尝试按照 Bootstrap 的建议构建元素。话虽如此，不要将每张卡片分成几部分。相反，将它们嵌套在 div 中。 The <section> tag defines a section in a document. & 如果我没记错的话，排成一行的三张卡片可以算作一个部分。我将所有三张卡片嵌套在一个部分中，并将其称为您已有的 highlights 类。
col的功能是为某些内容预留空间的方法。因此，对于三卡设置，您应该使用col-4。最大的列是col-12，它横跨屏幕的整个宽度。 12/4 = 3。然后您可以使用smlg和md来响应媒体屏幕。上面的示例使用预定义的网格类在小型、中型、大型和超大型设备上创建了三个等宽的列。这些列以 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>
在这里，您可以在 Bootstrap 网格系统中使用 Gutters 类。
间距是列内容之间的间隙，由水平填充创建。我们在每一列上设置 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>