Question

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

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

这是顺便说一下，还是我认为这太复杂了？

谢谢！

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

.header{
     .row;
}

同样在：https://groups.google.com/forum/#!topic/twitter-bootstrap/R5jEp0oQ_-E

Answer 1

不确定这是否是您的想法，但也许您可以设置页面的这一部分并使用类似的内容？

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

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

Bootstrap响应式CSS

1 个答案: