Bootstrap - 响应能力

Question

使用Bootstrap网格系统，

在容器 - 大型桌面小于1200px的值中，一个在另一个之下。像这样：

但是我希望它们并排浮动并变小 - 像这样直到760px：

同样在半砖网站图像中，屏幕中间的图像随着比例响应变小。

有没有办法用bootstrap管理它，还是应该自己用JS实现？

Answer 1

是的，这可以单独使用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 ，所有这些都在那里得到了很好的解释。