简单地说,如何在1024px处将 these columns (jsFiddle)换行 EVEN 。 Cuz,(@ 1024px)页面 IS 响应,但“stretchiness”很难看。
在我开始“乱砍”之前,我想,我会问......
感谢
答案 0 :(得分:2)
在基本级别,您可以mimic the Bootstrap method:
//
// Responsive: Landscape phone to desktop/tablet
// --------------------------------------------------
@media (max-width: 767px) {
// GRID & CONTAINERS
// -----------------
// Remove width from containers
.container {
width: auto;
}
// Fluid rows
.row-fluid {
width: 100%;
}
// Make all grid-sized elements block level again
[class*="span"], .row-fluid [class*="span"] {
float: none;
display: block;
width: 100%;
margin-left: 0;
.box-sizing(border-box);
}
.span12,
.row-fluid .span12 {
width: 100%;
.box-sizing(border-box);
}
}
当然是LESS CSS。这是编译的LESS:
[class*="span"], .row-fluid [class*="span"] {
-moz-box-sizing: border-box;
display: block;
float: none;
margin-left: 0;
width: 100%;
}
这是一个小片段,开始复制这个任务:
@media all and (min-width: 1000px) {
[class*="span"], .row-fluid [class*="span"] {
width: 100%;
}
}
http://jsfiddle.net/userdude/ZJJFJ/1/
还有一个responsive CSS file for greater than 1200px,也可能会有所帮助。如果你用LESS做这个,我相信它也会更简单,而不是纯CSS。