css - 如何让 Bootstrap 将缩略图放入 2 列而不是 800 x 600 及以下的 1 列？

Question

这里是a live example .

对于大分辨率，效果很好 - 您将在底部看到“热门产品”全部排成一排。

但是，如果您将窗口大小调整为 800 x 600，然后向下滚动，您将在一列中看到所有缩略图。

如何将其分成两列？还是 Bootstrap 不支持？

即我不想更改默认 CSS 文件中的任何逻辑 - 我只是想看看我是否做错了什么。

谢谢。

Answer 1

恐怕您无法在移动版本中使用纯 Bootstrap 获得两列。默认媒体查询将所有 .spanX 重新排列在一列中:

@media (max-width: 767px) {
  ...
  [class*="span"] {
    float: none;
    width: 100%;
    ...
  }
}

将 .spanX 嵌套在另一个 .spanX 中也不起作用。您可以做的是使用特殊版本的 .span2 来扩展默认的 Bootstrap 类以满足您的目的:

http://jsfiddle.net/LPsQy/

新的 .my-span2 的行为与常规 .span2 相同，但对于移动媒体查询，其工作方式与流动的 .span6 相同(占宽度的约 50%)。