Question

对于大分辨率，它运行正常 - 你会在一行中看到底部的“热门产品”。

但如果您将窗口调整为800 x 600，并向下滚动，您将看到1列中的所有缩略图。

我怎样才能让它成为2列？或者Bootstrap不支持吗？

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

感谢。

Answer 1

恐怕你无法在移动版本中使用纯Bootstrap获得两列。默认媒体查询会在一个列中重新排列任何.spanX：

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

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

新.my-span2的行为与常规.span2相同，但对于移动媒体查询，它可以作为流量.span6（占宽度的约50％）。

Answer 2

我认为如果不自行更改Bootstrap的CSS，这样做并非易事。如果你做得不好，这就是丑陋的解决方案：

生成的custom Bootstrap没有响应“Narrow tablets and below（＆lt; 767px）”选项。让我们称之为大。
仅使用一种媒体生成custom Bootstrap（我选择了“Tablets to desktops（767-979px）”）。让我们称之为小。
在小CSS中，我删除了行：@media (min-width: 768px) and (max-width: 979px) {，@media (max-width: 979px) {及其右括号}。这些是网格系统和导航栏。
使用以下内容创建您自己的CSS：

您的新css/bootstrap.css

@media (max-width: 767px) {
  ... paste Small CSS here ...
}
@media (min-width: 768px) {
  ... paste Big CSS here ...
}

请参阅example。

注1：它可能仍然不是您想要的，因为低于767px，网格系统固定为2柱，您可能更喜欢流体2列。

注意2 ：要使用hidden-*和visible-*类，还需要进行更多更改。

注3：您可以花一些时间来区分CSS文件以查看它们之间的真正区别。

创建Bootstrap是为了解决常见问题。如果您的问题不常见，那么解决方案将不容易;）在您的情况下，您需要通过选择Bootstrap的某些部分来重新创建自己的CSS ...