简而言之.如何转换：
<div class="row"> <div class="col col-lg-6 col-sm-6">6</div> <div class="col col-lg-6 col-sm-6">6</div> </div>
为此并保留小型移动网格：
<div class="wrapper"> <div class="left">6</div> <div class="right">6</div> </div>
减
.wrapper { .make-row(); }
.left { .make-column(6); // this creates only large grid }
.right { .make-column(6); }
解决方法
< 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- *类.
从现在起,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