2

这是一个活生生的例子。

对于大分辨率，它工作得很好——你会在底部看到一排排的“流行产品”。

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

我怎样才能让它出现在 2 列中？或者 Bootstrap 不支持吗？

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

谢谢。

4

2 回答 2

2

恐怕您无法使用纯 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%）。

于 2012-11-17T16:42:56.747 回答
0

我认为在不自行更改 Bootstrap 的 CSS 的情况下做到这一点并非易事。如果你不能做得很好，这里是丑陋的解决方案：

  1. 生成的自定义引导程序没有响应式“窄平板电脑及以下（<767px）”选项。让我们称之为Big。
  2. 仅使用一种媒体生成自定义引导程序（我选择“平板电脑到桌面（767-979px）”）。让我们称之为Small。
  3. 在 Small CSS 中，我删除了行：@media (min-width: 768px) and (max-width: 979px) {、、 @media (max-width: 979px) {和它们的右括号}。这些是网格系统和导航栏。
  4. 使用以下内容创建您自己的 CSS：

你的新css/bootstrap.css

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

见例子。

注意 1：它可能仍然不是您想要的，因为在 767px 以下，网格系统是固定的 2 列，您可能更喜欢流动的 2 列。

注意 2：需要进行更多更改 corhidden-*和visible-*classes 才能工作。

注意 3：您可以花一些时间来比较 CSS 文件，以了解它们的真正不同之处。

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

于 2012-11-19T11:56:19.093 回答