twitter-bootstrap – Twitter的Bootstrap 3.x语义移动网格

< div class =“row”>
< div class =“col-span-6 col-small-span-6”> 6< / div>
< div class =“col-span-6 col-small-span-6”> 6< / div>
< / DIV>

哪里col-span-6是大型电网的类,小电网的小六跨.如果你离开col-small-span-6,你的div将堆叠.小网格不使用col-span- *类.

参见：http://bassjobsen.weblogs.fm/migrate-your-templates-from-twitter-bootstrap-2-x-to-twitter-bootstrap-3/

从现在起,Twitter的Bootstrap定义了三个网格：手机的微格网格(< 480px),平板电脑的小网格(< 768px)和Destkops的中大网格( 768px).这些网格的行类前缀是“.col-”,“.col-sm-”和“.col-lg-”.中大网格将叠加在768像素屏幕宽度以下.小网格也低于480像素,而小网格也不会堆叠. 所以你的html应该是：

<div class="row">
  <div class="col-6 col-lg-6 col-sm-6">6</div>
  <div class="col-6 col-lg-6 col-sm-6">6</div>
</div>

减
最新版本：https://github.com/twitter/bootstrap/archive/3.0.0-wip.zip不再包含.make-small-column函数.另请参见：https://github.com/twbs/bootstrap/pull/8302 .make-column()将为min-width：@ grid-float-breakpoint添加一个媒体查询,因此在小网格上,您的列将始终使用此函数进行堆栈.

你可以试试：

// Generate the small columns
.make-small-column(@columns) {
  position: relative;
  float: left;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@grid-gutter-width / 2);
  padding-right: (@grid-gutter-width / 2);
  @max : (@grid-float-breakpoint - 1 );
  // Calculate width based on number of columns available
  @media (max-width: @max) {
    width: percentage((@columns / @grid-columns));
  }
}

.wrapper {  .make-row(); }
.left    { .make-column(6); .make-small-column(6);}
.right   { .make-column(6); .make-small-column(6);}

UPDATE

上面的答案将基于Twitter的Bootstrap 3的发布候选人.Twitter的Bootstrap 3的最终版本有4个网格超小(xs),小(sm),中(md)和大(lg).此外,Less代码也根据这些网格进行了更改.所以使用@gravy所描述的.make- {x} -column mixins在他的答案：https://stackoverflow.com/a/18667955/1596547