css - ブートストラップ：列を1024pxで折り返す方法

Question

列を1024pxで偶数にラップさせるにはどうすればよいですか？なぜなら、（@ 1024px）ページは応答性がありますが、「伸縮性」は醜いからです。

Answer 1

At a basic level, you can 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);
  }
}

Which of course is LESS CSS. This is the compiled LESS:

[class*="span"], .row-fluid [class*="span"] {
    -moz-box-sizing: border-box;
    display: block;
    float: none;
    margin-left: 0;
    width: 100%;
}

And here is a small snippet that begins the task of replicating this:

@media all and (min-width: 1000px) {
    [class*="span"], .row-fluid [class*="span"] {
        width: 100%;
    }
}

http://jsfiddle.net/userdude/ZJJFJ/1/

There's also a responsive CSS file for greater than 1200px, which may also be helpful. If you do this with LESS, I'm sure it will be simpler as well, instead of pure CSS.