如何解决bootstrap - 如何添加边距并使这些卡片水平显示
我有以下代码和 html（启用了引导程序）页面，该页面仅在页面上显示三个带有图像的引导卡。
我想要
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>
但出于教学目的，是否有一种简单的方法可以添加我必须达到的结果，从而教授正在做的事情的原则。
解决方法
这是我从您发布的饰品链接中修改的代码
请务必阅读官方网站上的 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>
变化
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
