bootstrap实现右侧图片左侧文字布局
时间: 2023-07-13 12:18:38 浏览: 448
bootstrap布局
可以使用 Bootstrap 的栅格系统来实现右侧图片左侧文字的布局。具体步骤如下:
1. 使用 `row` 和 `col` 标签创建一行,其中 `col` 标签的宽度分配为 12 栅格中的 9 栅格,即占据左侧 75% 的宽度。
2. 在 `col` 标签内部创建一个 `h2` 标题和一个段落,用于显示文字信息。
3. 在 `col` 标签内部创建一个 `img` 标签,用于显示右侧的图片。将 `img` 标签的宽度设置为 100% ,高度设置为自适应。
4. 可以使用 CSS 样式对文字和图片进行进一步的布局和美化。
示例代码如下:
```html
<div class="container">
<div class="row">
<div class="col-md-9">
<h2>这是一个标题</h2>
<p>这是一段文字信息</p>
</div>
<div class="col-md-3">
<img src="图片地址" style="width: 100%; height: auto;">
</div>
</div>
</div>
```
注意,这里使用的是 `col-md-9` 和 `col-md-3`,意味着在中等屏幕大小(宽度大于等于 768px)时,左侧的 `col` 标签占据了 9 栅格,右侧的 `col` 标签占据了 3 栅格。如果需要适配不同的屏幕大小,可以使用 `col-sm`、`col-lg` 等不同的类名来设置不同的栅格宽度。
阅读全文