Css 引导-当屏幕无限大时，如何智能地增加列数？

对于大屏幕和超大屏幕，我使用以下类：

col-xl-4 col-lg-6 col-sm-12

它在超大屏幕上创建了3列，非常棒。但是第一个问题是当涉及到超大屏幕时，它将始终保持在3列

当屏幕变大且无限大时，如何增加列数

例如-取决于屏幕大小

col-xxl-5
col-xxxl-6
col-xxxxl-7
col-xxxxxl-8

而第二个问题是，您可以看到我手动添加了类

col-xxxxx l-8

，这并不理想。那么，有什么方法可以智能地做到这一点吗

或者也许可以做得更好

---

这就是我正在研究的问题。

我不是Bootstrap的粉丝，但我知道ZURB的基金会有能力声明更大的断点（也称为媒体查询），这样你就可以在大屏幕上设计你的代码。如本文所述：

然后，您就可以使用以下内容：

<div class="row">
  <div class="small-6 medium-3 xxlarge-4 columns"></div>
  <div class="small-6 medium-3 xxlarge-4 columns"></div>
</div>

---

请记住，你必须使用SASS版本的基础。< /P> @ DavidG，请举个例子。“怎么样？”我也没有找到解决方案，直到现在我添加了这个CSS:

/**最大宽度和内联块方法到XL**/@media屏幕和（最小宽度：1600px）{.items网格{text align:center；font size:0；}.item网格{Max width:600px；float:none；display:inline block；font size:14px；}

因此，对于任何大于1600px的屏幕尺寸，将

.items grid'文本对齐到中心，然后将所有

item grid`元素显示为内联块。为它们设置一个最大宽度，这样它们就不会太宽。谢谢你的回答。这似乎是我正在寻找的解决方案！：-）

<div class="row">
  <div class="small-6 medium-3 xxlarge-4 columns"></div>
  <div class="small-6 medium-3 xxlarge-4 columns"></div>
</div>