css – Twitter的Bootstrap 3网格,更改断点和删除填充

前端之家收集整理的这篇文章主要介绍了css – Twitter的Bootstrap 3网格,更改断点和删除填充前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我试图移动到新的boostrap 3网格,我面临一些困难.

>如何使网格堆叠在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>

解决方法

更新jan 2014

参见: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

原文链接:https://www.f2er.com/css/214380.html

猜你在找的CSS相关文章