Twitter的Bootstrap 3网格,改变断点并删除填充

Question

我试图转移到新的boostrap 3网格,我面临一些困难.

1. 如何将网格堆叠在480px以下但不在480px和768px之间？
2. 在768px以上,第一个填充左边的填充和最后一个填充在容器外面,但是在768px以下,填充在容器内部,因此外观不同,因为内容不再与可能在上面的容器对齐.
3. 当网格堆栈填充保留但对我来说它应该为0.

欢迎任何帮助我使用下面的代码与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>

Answer 1

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像素)和col-lg-*(桌面,堆栈低于1200px).

更新 在我之前的回答中,我使用了最近的文档中的这个表:

[旧图片已删除]

当我测试这个值时,如果发现不同的东西:

• "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; 然后定义你的cols: <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/并编写Twitter的Bootstrap并考虑升级到v3