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的自举定义了三个网格：为电话微小网格（小于480像素），小格为片剂（小于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

Answer 2

1. 对480px以下的所有100％.col-ts-12使用类divs，并将此代码放在bootstrap.css的末尾：

   @media (max-width: 480px) { 
       .col-ts-12 { float: none; }
   }
   

Answer 3

要对小型设备实施任何更改，您需要包含自己的媒体查询，以添加自己的其他断点。

例如：

@media (max-width: 480px) { 
   .no-float {
       display:block;
       float:none;
       padding:0;
   }
}

我不太确定你想用这个来实现什么，但这就是你应用的方式，在屏幕宽度低于480px时。