css - Bootstrap block 网格

Question

我有 225px x 225px 的数据 block ，填充为 5px。

• 在 320 像素宽度上我想要 1 个数据 block
• 在 480px 上我想要 2 个数据 block
• 在 720px 上我想要 3 个数据 block
• 在 950px 上我想要 4 个数据 block
• 在 1175px 上我想要 5 个数据 block
• 在 1410px 上我想要 6 个数据 block

我试着这样做:

<li class="col-lg-3 col-md-4 col-sm-5 col-xs-7"><img src="image/test.png"/></li>
<li class="col-lg-3 col-md-4 col-sm-5 col-xs-7"><img src="image/test.png"/></li>

但我没有足够的可能性。如何添加更多内容或如何以更好的方式修复它？

Answer 1

首先，这不能全部在 Bootstrap 上完成，您的列数需要是 12 的一个因数，例如5 不适合 12 没有余数。 2、3、4、6都可以

Bootstrap 也只有 4 个截止点:

• 小于768
• 大于等于768
• 大于等于992
• 大于等于1200

col-xs-12 表示当屏幕尺寸为 767px 及以下时，它将占据所有 12 列，因此给你 1 个数据 block

col-xs-6 表示当屏幕尺寸为 767px 或更低时，每列将占用 6 列，因此每行有 2 个数据 block

col-sm-4 表示当屏幕尺寸为 768 及以上时，每列将占用 4 列，每行 3 列

col-md-3 表示当屏幕尺寸为 992 及以上时，每列将占用 3 列，每行 4 列

和

col-lg-2 表示当屏幕超过 1200 时，每行将占用 2 列，每行 6 列