web使用Bootsrap中卡片将一段话放入卡片中并且一行放三个卡片。
时间: 2024-10-17 11:12:11 浏览: 40
Bootstrap中的卡片(Cards)是一种常见的UI组件,用于展示内容块并提供清晰的视觉分隔。如果你想在一个页面上显示三行每行三个卡片,可以按照以下步骤操作:
1. 首先,在HTML中引入Bootstrap的CSS和JS文件,如果你使用的是CDN,可以在head部分添加:
```html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css">
```
和
```html
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script>
```
2. 创建卡片容器`<div class="container">`,然后使用`.row`元素分隔成三行:
```html
<div class="container">
<div class="row">
<!-- 卡片将会放在这里 -->
</div>
<!-- 可以添加更多的行 -->
</div>
```
3. 使用`.col-md-4`类创建每个卡片,这表示在大屏幕(md及以上)宽度下,每个卡片占据四列。你可以创建三个这样的卡片在每一行:
```html
<div class="row">
<div class="col-md-4 d-flex flex-column justify-content-between">
<div class="card">
<!-- 卡片内容 -->
</div>
</div>
<!-- 重复上面这部分代码,创建另外两个卡片 -->
</div>
```
将你想放入卡片的内容替换到`<div class="card">`标签内。
阅读全文