Twitter 的 Bootstrap 3 网格，更改断点并删除填充 [英] Twitter's Bootstrap 3 grid, changing breakpoint and removing padding

问题描述

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

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

欢迎任何帮助我将下面的代码与引导程序 3 RC1 一起使用

 
容器
<div class="容器"><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>

解决方案

2014 年 1 月更新

另见: 说网格缺少col-ts-*(从小到小)类集).另请参阅:https://github.com/twbs/bootstrap/issues/9746

要将堆叠点设置为 480 像素，您必须重新编译您的 css.将@screen-small 设置为 480px；并定义您的 cols:

之后.注意这会改变@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"，让你的网格堆叠在 480 像素以下.这也将删除填充，因为现在是堆栈.

另见:http://bassjobsen.weblogs.fm/migrate-your-templates-from-twitter-bootstrap-2-x-to-twitter-bootstrap-3/ 和 在考虑升级到 v3 的情况下编写 Twitter 的 Bootstrap

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

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.

Any help would be welcome I m using the code below with 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>

解决方案

update jan 2014

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

update 21 aug 2013 Since 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).

update In 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)

In variables.less you will find:

// 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

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

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

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

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.

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.

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

这篇关于Twitter 的 Bootstrap 3 网格，更改断点并删除填充的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！