bootstrap实现上图片下文字布局
时间: 2023-07-18 07:47:26 浏览: 118
要实现图片下文字的布局,可以借助于 Bootstrap 的 Grid System,具体步骤如下:
1. 在 HTML 中创建一个包含图片和文字的容器,可以使用 Bootstrap 的 `container` 或者 `container-fluid` 类。
2. 在容器内部创建一个行(`row`)。
3. 将图片和文字分别放在行内的不同列(`col`)中,可以使用 `col-sm-*`、`col-md-*`、`col-lg-*` 等类来指定在不同屏幕尺寸下的列宽。
4. 如果需要让图片和文字居中对齐,可以在行内的列中再次创建一个行,并将图片和文字分别放在该行的不同列中。
下面是一个示例代码:
```html
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="row align-items-center">
<div class="col-md-12">
<img src="image.jpg" class="img-fluid" alt="Responsive image">
</div>
</div>
</div>
<div class="col-md-6">
<div class="row align-items-center">
<div class="col-md-12">
<h3>标题</h3>
<p>这里是文字内容。</p>
</div>
</div>
</div>
</div>
</div>
```
在上述代码中,我们使用了 `align-items-center` 类来让图片和文字垂直居中对齐。此外,使用了 `img-fluid` 类来让图片自适应容器大小。你可以根据实际需求调整代码中的类名和样式。