使用Bootstrap网格系统,
在容器 - 大型桌面小于1200px的值中,一个在另一个之下。像这样:
但是我希望它们并排浮动并变小 - 像这样直到760px:
同样在半砖网站图像中,屏幕中间的图像随着比例响应变小。
有没有办法用bootstrap管理它,还是应该自己用JS实现?
答案 0 :(得分:3)
是的,这可以单独使用Bootstrap完成,请尝试以下HTML:
<div class="row">
<div class="col-sm-4">Column 1</div>
<div class="col-sm-4">Column 2</div>
<div class="col-sm-4">Column 3</div>
</div>
这种方式在大型设备上你将有三列,当你低于768px时,它们会将一个堆叠在另一个上面。对于不同的尺寸,您可以分别使用xs
,md
和lg
来代替<768px
,>992px
和>1200px
。
对于您可以使用的响应式图像:
<img src="..." class="img-responsive" alt="Responsive image">
他们会根据容器大小自动调整大小。
看看 Bootstrap documentation ,所有这些都在那里得到了很好的解释。