CSS Twitter 的 Bootstrap 3 网格，更改断点并删除填充

Twitter's Bootstrap 3 grid, changing breakpoint and removing padding

提问by fred_

I m trying to move to the new boostrap 3 grid and I m facing some difficulties.

我正在尝试转向新的 boostrap 3 网格，但遇到了一些困难。

1. How to have the grid to stack below 480px but not between 480px and 768px?
2. above 768px the padding left of the first and the padding right of the last are outside the container, but below 768px the padding is inside the container so the look is different because the content is no more aligned with a container that could be above.
3. when the grid stack the padding remain but to me it should be at 0.

1. 如何让网格堆叠在 480px 以下但不在 480px 和 768px 之间？
2. 高于 768px，第一个左边的内边距和最后一个右边的内边距在容器外，但低于 768px 内边距在容器内，因此外观不同，因为内容不再与可能位于上方的容器对齐。
3. 当网格堆叠时，填充仍然存在，但对我来说它应该是 0。

Any help would be welcome I m using the code below with bootstrap 3 RC1

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

回答by Bass Jobsen

update jan 2014

2014 年 1 月更新

See also: https://github.com/twbs/bootstrap/issues/10203

另见：https: //github.com/twbs/bootstrap/issues/10203

update 21 aug 2013Since Twitter Bootstrap 3 RC2 the col-* mentioned below has been renamed to xs-col-* There are four grid classes now: xs-col-* (mobile, never stacks), col-sm-* (tablet, stacks below 768px), col-md-* (laptops,stacks below 992 px) and col-lg-* (desktop, stacks below 1200px).

2013 年 8 月 21 日更新自 Twitter Bootstrap 3 RC2 以来，下面提到的 col-* 已重命名为 xs-col-* 现在有四个网格类：xs-col-*（移动，从不堆叠）、col-sm-*（平板电脑） , 堆栈低于 768 像素）、col-md-*（笔记本电脑，堆栈低于 992 像素）和 col-lg-*（桌面，堆栈低于 1200 像素）。

updateIn my previous answer i use this table from the recent docs:

更新在我之前的回答中，我使用了最近文档中的这张表：

[old image removed]

[旧图已删除]

When i test this values if found something different:

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

• "col-xs-*" will be applied always (never stacks)
• "col-sm-*" will be applied between 768 and higher (992px) (stacks at 767)
• "col-lg-*" will be applied between 992 and higher (stacks at 991)

• “col-xs-*”将始终应用（从不堆叠）
• “col-sm-*”将在 768 和更高（992px）之间应用（堆栈为 767）
• "col-lg-*" 将在 992 和更高之间应用（在 991 处堆叠）

In variables.less you will find:

在 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;

But there doesn't seem to be a breakpoint at 480px (or as @fred_says the grid is missing the col-ts-* (tiny to small) set of classes). See also: https://github.com/twbs/bootstrap/issues/9746

但是在 480px 处似乎没有断点（或者@fred_说网格缺少 col-ts-*（小到小）类集）。另见：https: //github.com/twbs/bootstrap/issues/9746

To set the stacking point at 480px you will have to recompile yours css. Set @screen-small to 480px; and define your cols with: <div style="background-color: red" class="col-sm-4">after that. Note this will change @grid-float-breakpoint also cause it is defined as @grid-float-breakpoint: @screen-tablet;.

要将堆叠点设置为 480px，您必须重新编译您的 css。将@screen-small 设置为 480px；并定义你的 cols ： <div style="background-color: red" class="col-sm-4">之后。注意这会改变 @grid-float-breakpoint 也因为它被定义为@grid-float-breakpoint: @screen-tablet;.

When adding a row to the container i don't find problems with padding.

向容器中添加一行时，我没有发现填充问题。

Or try: http://www.bootply.com/70212it will stack below 480px by adding a media query (the javascript is used for illustration only)

或者尝试：http: //www.bootply.com/70212 通过添加媒体查询，它将堆叠到 480px 以下（javascript 仅用于说明）

previous answer

以前的回答

From now Twitter's Bootstrap defines three grids: Tiny grid for Phones (<480px), Small grid for Tablets (<768px) and the Medium-large grid for Destkops (>768px). The row class prefixes for these grid are “.col-”, “.col-sm-” and “.col-lg-”. The Medium-large grid will stack below 768 pixels screen width. So does the Small grid below 480 pixels and the tiny grid never stacks.

从现在开始，Twitter 的 Bootstrap 定义了三个网格：手机的小网格（<480 像素）、平板电脑的小网格（<768 像素）和 Destkops 的中大网格（>768 像素）。这些网格的行类前缀是“.col-”、“.col-sm-”和“.col-lg-”。中大网格将在 768 像素屏幕宽度以下堆叠。480 像素以下的小网格也是如此，并且小网格永远不会堆叠。

With your "col-4" prefix the grid will never stack. So remove "col-4" to let your grid stack below the 480px. This also will remove padding cause is stacks now.

使用您的“col-4”前缀，网格将永远不会堆叠。所以删除“col-4”，让你的网格堆叠在 480 像素以下。这也将删除填充，因为现在是堆栈。

See also: http://bassjobsen.weblogs.fm/migrate-your-templates-from-twitter-bootstrap-2-x-to-twitter-bootstrap-3/and Writing Twitter's Bootstrap with upgrading to v3 in mind

另请参阅：http: //bassjobsen.weblogs.fm/migrate-your-templates-from-twitter-bootstrap-2-x-to-twitter-bootstrap-3/和编写 Twitter 的 Bootstrap 并考虑升级到 v3

回答by otopic

1. Use class .col-ts-12for all 100% divsunder 480px and put this code at the end of bootstrap.css:

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

1. .col-ts-12对divs480px 下的所有 100%使用 class并将此代码放在 bootstrap.css 的末尾：

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

回答by Daniel West

To implement any changes for tiny to small devices you will need to include your own media queries to add your own additional breakpoints.

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

For example:

例如：

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

I am not quite sure what you are trying to achieve with this but this is how you would apply styles where the screen width is below 480px.

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