引导响应式 CSS答案

【问题标题】：Bootstrap responsive CSS引导响应式 CSS
【发布时间】：2012-09-16 21:53:49
【问题描述】：

我有一个四列设计，我正在使用 Bootstrap。该设计在移动设备的单列中呈现良好，但在“（最小宽度：768px）和（最大宽度：979px）”中，虽然只有两列空间，但我得到四列。很明显，需要针对这些尺寸重新考虑行/跨度设置。

我能想到的唯一方法是在 HTML 中使用语义 CSS 类，并且只在 CSS 中使用 LESS 包括网格类，然后根据屏幕大小，包括不同的网格类来实现四列或两列布局。不过不确定这是否可行。

这是要走的路，还是我想的太复杂了？

谢谢！

编辑：这不起作用。它只导入直接应用于 .row 的规则，不涉及更复杂的规则 .row。我认为它会起作用的原因是我看到有人在其他网格上使用 SASS 执行此操作。想法？

.header{
     .row;
}

也位于：https://groups.google.com/forum/#!topic/twitter-bootstrap/R5jEp0oQ_-E

【问题讨论】：

Twitter Bootstrap，就是这样。（标题应该是“4 列用于大屏幕，2 列用于小屏幕，1 列用于移动设备。响应式布局是否需要 LESS？”这里也是如此，但 stackExchange 出现了问题，之后我忘了修复标题.)
回答您评论中的问题。制作响应式布局不需要 LESS。

标签： css twitter-bootstrap grid sass

【解决方案1】：

不确定这是否是您的想法，但也许您可以为页面的该部分设置样式并使用类似的东西？

@gridColumnWidth: 60px; // example width declared in bootstrap

@media only screen and (min-width: 768px) and (max-width: 979px) {
   .yourClass {
        max-width: @gridColumnWidth * 2
    }
}

【讨论】：

谢谢。它类似于 google groups 的建议，当然使用 LESS 是一个加号。不过，我更喜欢只玩 Bootstrap 的行/列语义，而不是触及宽度。作为一个面向对象的开发人员，我的脑海中有这样一个适当封装的理想，尽管我不确定这在多大程度上适用。如果 Bootstrap 得到发展，你会期望他们创建的语义无论如何都可以工作，但如果你依赖它们的“内部”变量，如 gridColumnWidth，那么将来可能会中断。