自举块网格

Question

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

• 在320 px宽度上，我想要一个数据库
• 在480 on上，我想要两个数据库锁
• 在720 on上，我想要3个数据库锁
• 在950 on上，我想要4个数据库锁
• 在1175 on上，我想要5个数据库锁
• 在1410 on上，我想要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将意味着当屏幕大小为767 it或更低时，它将占用所有12列，因此给您一个数据库。

col-xs-6将比屏幕大小为767 per或更低时，每一行将占用6列，因此每行将有2个数据库锁。

col-sm-4将意味着当屏幕大小为768及以上时，它将各占4列，每行3列。

col-md-3将意味着当屏幕大小为992及以上时，它将各占3列，每行4列。

和

lg-2将意味着当屏幕超过1200时，每个屏幕将占据2列，每行6列。

Answer 2

您可以使用其他类创建可被十个除的数据块。示例:大于1200 on的屏幕上每行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标记覆盖它，这样就会很快变得混乱不堪。