>如何使网格堆叠在480像素以下,而不是480像素和768像素之间?
> 768px以上,第一个填充的左边和最后一个的填充右边在容器外面,但低于768px的填充在容器内,所以外观是不同的,因为内容不再与可能在上面的容器对齐.
>当网格堆栈的填充保留,但对我来说应该是0.
任何帮助将是欢迎我使用下面的代码与引导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 src="holder.js/100%x200"></div> <div style="background-color: blue" class="col-4 col-sm-4 col-lg-4"><img src="holder.js/100%x200"></div> <div style="background-color: green" class="col-4 col-sm-4 col-lg-4"><img src="holder.js/100%x200"></div> </div> </div>
解决方法
参见: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像素的堆栈)和col-lg- *(桌面,堆栈低于1200像素).
更新
在我以前的答案中,我从最近的文档中使用这个表:
当我测试这个值,如果发现不同的东西:
>“col-xs- *”将始终应用(从不堆栈)
>“col-sm- *”将应用于768和更高(992px)(堆栈在767)
>“col-lg- *”将应用于992和更高(991的堆栈)
在变量中,你会发现:
// 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定义了三个网格:手机的微格网格(< 480px),平板电脑的小网格(< 768px)和Destkops的中大网格( 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