html - Bootstrap - 构建流体网格

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

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

<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>