具有折叠的Bootstrap响应多列

Question

请帮助我如何使用boostrap 3完成此操作。我已经附加了三张从桌面上拍摄的不同屏幕尺寸的照片。responsive (desktop, ipad, iphone

Answer 1

我认为您可以创建嵌套列表组，通过更改其宽度，您可以创建响应式设计。使用类似的东西：

<div class="col-lg-2 col-md-3 col-sm-12 col-xs-12"> ... </div>

通过这种方式，您可以在大屏幕中并排显示6列，在较小屏幕中每行只能显示一列。

Bootstrap应与“移动优先设计”方法一起使用。因此，您必须首先根据较小的屏幕设计屏幕，然后您应该考虑更大的屏幕尺寸。

我建议你花点时间在

以下是嵌套列表组的几个演示：

consistent-styling-for-nested-lists-with-bootstrap

nested list group example

我希望这能给你一个起点。