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

2018-07-01 16:16:55

我试图移动到新的助推器3电网，我正面临一些困难。

如何让网格堆叠在480像素以下但不在480像素和768像素之间？

在768px之上，第一个填充和第二个填充在容器外部，但低于768px，填充位于容器内部，所以外观不同，因为内容不再与可能位于上面的容器对齐。

当网格堆栈填充保留但对我来说它应该在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>

2014年1月更新

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

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

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

[删除旧图像]

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

Bootstrap 3 Grid

“col-xs- *”将始终应用（从不堆叠）

“col-sm- *”将在768和更高（992px）之间应用（堆叠在767处）

“col-lg- *”将在992和更高之间应用（堆栈在991）

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

但是在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

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

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

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

例如：

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

我不太确定你试图用这个来实现什么，但是这是你应该如何应用屏幕宽度低于480px的样式。

链接地址: http://www.djcxy.com/p/88327.html

上一篇: Twitter's Bootstrap 3 grid, changing breakpoint and removing padding

下一篇: Can't apply bootstrap grid to layout