基于bootstrap做一个响应式布局容器,要求是大屏显示一行三张图片,中屏一行两张,小屏一行一张图片
时间: 2024-05-16 12:14:38 浏览: 8
可以使用Bootstrap的栅格系统来实现响应式布局容器。
首先,可以使用以下代码来创建一个包含三张图片的大屏容器:
```
<div class="container">
<div class="row">
<div class="col-lg-4">
<img src="image1.jpg" class="img-fluid">
</div>
<div class="col-lg-4">
<img src="image2.jpg" class="img-fluid">
</div>
<div class="col-lg-4">
<img src="image3.jpg" class="img-fluid">
</div>
</div>
</div>
```
在上述代码中,我们使用了`.container`和`.row`来创建容器和行,然后使用`.col-lg-4`将每张图片放入一个占据4个列宽的列中。
对于中屏和小屏,我们只需要将`.col-lg-4`替换为`.col-md-6`和`.col-sm-12`即可。具体代码如下:
```
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-6 col-sm-12">
<img src="image1.jpg" class="img-fluid">
</div>
<div class="col-lg-4 col-md-6 col-sm-12">
<img src="image2.jpg" class="img-fluid">
</div>
<div class="col-lg-4 col-md-6 col-sm-12">
<img src="image3.jpg" class="img-fluid">
</div>
</div>
</div>
```
在上述代码中,我们使用了`.col-md-6`和`.col-sm-12`来分别将每张图片放入一个占据6个列宽的列和一个占据12个列宽的列中。这样,在中屏和小屏上,每行只会显示两张或一张图片。