bootstrap - 如何添加边距并使这些卡片水平显示

Question

我有以下代码和 html（已启用引导程序）页面，该页面仅显示三张 bootstrap 带有图像的卡片。

我要

a) 左侧边距要包括在内 b) 卡片水平显示（在屏幕上一张接一张）而不是垂直显示。

我尝试了各种方法，但都无济于事。谁能给初学者解释清楚如何实现这些东西。

完整代码

<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
</head>
<body>

<h1>Website</h1> 
<h2>Site with multiple horizontal cards</h2>

<!-- card 1--> 
<div class="card" style="width: 14rem;">
  <img src="https://cdn5.vectorstock.com/i/1000x1000/23/24/ladybug-insect-small-icon-animal-vector-19752324.jpg" class="card-img-top" alt="...>
  <div class="card-body">
    <h5 class="card-title">Card 1</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>
<!-- card 2--> 
<div class="card" style="width: 14rem;">
  <img src="https://cdn5.vectorstock.com/i/1000x1000/23/24/ladybug-insect-small-icon-animal-vector-19752324.jpg" class="card-img-top" alt="...>
  <div class="card-body">
    <h5 class="card-title">Card 1</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>
<!-- card 3--> 
<div class="card" style="width: 14rem;">
  <img src="https://cdn5.vectorstock.com/i/1000x1000/23/24/ladybug-insect-small-icon-animal-vector-19752324.jpg" class="card-img-top" alt="...>
  <div class="card-body">
    <h5 class="card-title">Card 1</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>


<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>

</body>

</html>

饰品

https://trinket.io/html/8fcb4c4f39?runMode=autorun

当前显示

更新：

我明白我可以重新开始并尝试在这个结构中实现所有内容

<div class="container">
  <div class="row">
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
  </div>

但是出于教学目的，有没有一种简单的方法可以添加我必须达到的结果，从而教授正在做的事情的原则。

Answer 1

这是我根据您发布的 Trinket 修改的代码 Link

请务必阅读官方网站的 bootstrap 文档或 bootstrap 中有关 12 网格系统的任何教程。

<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
</head>
<body>

<h1>Website</h1> 
<h2>Site with multiple horizontal cards</h2>
<div class="container">
  <div class="row">
<!-- card 1--> 
<div class="col-4">
<div class="card" style="width: 14rem;">
  <img src="https://cdn5.vectorstock.com/i/1000x1000/23/24/ladybug-insect-small-icon-animal-vector-19752324.jpg" class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card 1</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>
</div>
<!-- card 2--> 
<div class="col-4">
<div class="card" style="width: 14rem;">
  <img src="https://cdn5.vectorstock.com/i/1000x1000/23/24/ladybug-insect-small-icon-animal-vector-19752324.jpg" class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card 1</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>
</div>
<!-- card 3--> 
<div class="col-4">
<div class="card" style="width: 14rem;">
  <img src="https://cdn5.vectorstock.com/i/1000x1000/23/24/ladybug-insect-small-icon-animal-vector-19752324.jpg" class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card 2</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
  </div>
</div>
</div>
</div>


<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>

</body>

</html>

变化

bootstrap - 如何添加边距并使这些卡片水平显示

bootstrap - how to add a margin and make these cards display horizontally

html

layout

margin

bootstrap-4

bootstrap-cards