Bootstrap块网格

Question

我有225px到225px的数据块和5px填充。

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

我尝试这样做：

<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个数据块

col-xs-6意味着当屏幕尺寸为767px及更低时，每个将占用6列，因此每行提供2个数据块

col-sm-4意味着当屏幕尺寸为768及以上时，每个将占用4列，每行3个

col-md-3意味着当屏幕尺寸为992及以上时，每个将占用3列，每行4个

和

col-lg-2意味着当屏幕高于1200时，它将占用2列，每行6个

Answer 2

您可以使用其他类创建可被10整除的数据块。例： 屏幕大于1200px时每行5个块：

// in your stylesheet
@media (min-width: 1200px) {
    .col-xl-2.ten-column {
        width: 20%;
    }
  }


// in page body
<div class="col-xl-2 ten-column"></div>
<div class="col-xl-2 ten-column"></div>
<div class="col-xl-2 ten-column"></div>
<div class="col-xl-2 ten-column"></div>
<div class="col-xl-2 ten-column"></div>

确保使用其他类执行此操作。不要做     .col-xs-2 { width: 20%}

因为如果你需要改变页面中任何其他位置的宽度，你必须用!important标签覆盖它，并且事情会变得很乱。