大佬教程收集整理的这篇文章主要介绍了twitter-bootstrap – Twitter的Bootstrap 3.x语义移动网格，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
简而言之.如何转换：
<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添加一个媒体@L_801_8@,因此在小网格上,您的列将始终使用此函数进行堆栈.
你可以试试：
// 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);}
上面的答案将基于Twitter的Bootstrap 3的发布候选人.Twitter的Bootstrap 3的最终版本有4个网格超小(xs),小(sm),中(md)和大(lg).此外,Less代码也根据这些网格进行了更改.所以使用@gravy所描述的.make- {x} -column mixins在他的答案：https://stackoverflow.com/a/18667955/1596547
以上是大佬教程为你收集整理的twitter-bootstrap – Twitter的Bootstrap 3.x语义移动网格全部内容，希望文章能够帮你解决twitter-bootstrap – Twitter的Bootstrap 3.x语义移动网格所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。