我有一个四列设计,我正在使用 Bootstrap。该设计在移动设备的单列中呈现良好,但在“(最小宽度:768px)和(最大宽度:979px)”中,我得到四列,尽管只有两列。很明显,需要针对这些尺寸重新考虑行/跨度设置。
我能想到的唯一方法是在 HTML 中使用语义 CSS 类,并使用 LESS 在 CSS 中仅包含网格类,然后根据屏幕大小,包含不同的网格类以实现四列或两列布局。不过也不确定这是否可行。
这是可行的方法,还是我想得太复杂了?
谢谢!
编辑:这不起作用。它只导入直接应用于 .row 的规则,不涉及任何更复杂的规则 .row。我认为它可行的原因是我看到有人在其他网格上使用 SASS 这样做。想法?
.header{
.row;
}
同时在:https://groups.google.com/forum/#!topic/twitter-bootstrap/R5jEp0oQ_-E
最佳答案
不确定这是否是您的想法,但也许您可以为页面的那部分设置样式并使用类似这样的东西?
@gridColumnWidth: 60px; // example width declared in bootstrap
@media only screen and (min-width: 768px) and (max-width: 979px) {
.yourClass {
max-width: @gridColumnWidth * 2
}
}
关于css - Bootstrap 响应式 CSS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12581965/