我试图移至新的boostrap 3网格,但遇到了一些困难。
我将在Bootstrap 3 RC1中使用以下代码,欢迎任何帮助
<div class="container" style="background-color: purple;">
container
</div>
<div class="container">
<div class="row">
<div style="background-color: red" class="col-4 col-sm-4 col-lg-4"><img data-src="holder.js/100%x200"></div>
<div style="background-color: blue" class="col-4 col-sm-4 col-lg-4"><img data-src="holder.js/100%x200"></div>
<div style="background-color: green" class="col-4 col-sm-4 col-lg-4"><img data-src="holder.js/100%x200"></div>
</div>
</div>
最佳答案
2014年1月更新
另请参阅:https://github.com/twbs/bootstrap/issues/10203
更新2013年8月21日
从Twitter Bootstrap 3 RC2开始,以下提到的col- *已重命名为xs-col- *
现在有四个网格类:xs-col-*(移动,从不堆栈),col-sm-*(平板电脑,小于768px的堆栈),col-md-*(笔记本计算机,小于992 px的堆栈)和col-lg- *(桌面,堆栈低于1200px)。
更新
在我以前的回答中,我使用最近文档中的这张表:
[删除旧图片]
当我测试此值时,如果发现不同:
在variables.less中,您会发现:
// Media queries breakpoints
// --------------------------------------------------
// Tiny screen / phone
@screen-tiny: 480px;
@screen-phone: @screen-tiny;
// Small screen / tablet
@screen-small: 768px;
@screen-tablet: @screen-small;
// Medium screen / desktop
@screen-medium: 992px;
@screen-desktop: @screen-medium;
但是似乎在480px处没有断点(或者像@fred_所说的那样,网格缺少col-ts-*(从小到小)的一组类)。另请参阅:https://github.com/twbs/bootstrap/issues/9746
要将堆栈点设置为480px,您必须重新编译css。将@ screen-small设置为480px;并使用以下命令定义您的列:
之后是
<div style="background-color: red" class="col-sm-4">
。请注意,这将更改@ grid-float-breakpoint,也将其定义为
@grid-float-breakpoint: @screen-tablet;
。当向容器添加一行时,我发现填充没有问题。
或尝试:http://www.bootply.com/70212通过添加媒体查询将其堆叠到480px以下(JavaScript仅用于说明)
上一个答案
从现在开始,Twitter的Bootstrap定义了三个网格:电话的微小网格( 768px)。这些网格的行类前缀为“.col-”,“。col-sm-”和“.col-lg-”。中型网格将堆叠到768像素以下的屏幕宽度。低于480像素的小网格也不会堆叠。
使用“col-4”前缀,网格将永远不会堆叠。因此,删除“col-4”以使您的网格堆叠在480px以下。这也将消除填充原因,因为现在是堆栈。
另请参阅:http://bassjobsen.weblogs.fm/migrate-your-templates-from-twitter-bootstrap-2-x-to-twitter-bootstrap-3/和Writing Twitter's Bootstrap with upgrading to v3 in mind