0

我有以下代码和 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>

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

4

1 回答 1

1

这是我从您发布的 Trinket Link 中修改的代码

确保您阅读了官方网站上的引导文档或任何有关引导中 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>

变化

在此处输入图像描述

于 2021-01-06T16:27:38.943 回答