Bootstrap:如何使列包裹@ 1024px

时间:2012-09-29 00:56:40

标签: css twitter-bootstrap

简单地说,如何在1024px处将 these columns (jsFiddle)换行 EVEN 。 Cuz,(@ 1024px)页面 IS 响应,但“stretchiness”很难看。

在我开始“乱砍”之前,我想,我会问......

感谢

1 个答案:

答案 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。