Question

我想要在大屏幕上显示4个项目，在较小的屏幕上显示3个，在较小的屏幕上显示2个，依此类推。

我每组都有4个元素，每个元素都有一个类：col-xs-12 col-sm-6 col-md-4 col-lg-3。

问题是当屏幕缩小到元素连续显示三个点时，它会显示三个然后显示一个，如下所示：

1 1 1

1

1 1 1

1

1 1 1

1

我怎样才能获得它，以便下一行在三分之一时显示与前一行相同的行？

Answer 1

Bootstrap使用百分比来显示列，所以如果需要漂亮的网格，我总是这样做：

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

Answer 2

将col-md-4更改为col-md-3。因为完整网格宽度为12.如果要并排显示4个div，则需要将其更改为col-*-3（12/4 = 3）。

Answer 3

请查看下面引用的网站，我相信它会对您有所帮助。它是一个图形引导网格设计师＆＃39;。

http://shoelace.io/

Bootstrap - 构建流体网格

3 个答案: