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

Posted 2023-03-06

【中文标题】Twitter 的 Bootstrap 3 网格，更改断点和删除填充

【英文标题】：Twitter's Bootstrap 3 grid, changing breakpoint and removing padding

【发布时间】：2013-07-28 23:00:55

【问题描述】：

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

如何让网格堆叠在 480px 以下但不在 480px 和 768px 之间？ 768 像素以上第一个的左边距和最后一个右边的内边距在容器外，但在 768 像素以下，内边距在容器内，因此外观不同，因为内容不再与可能的容器对齐以上。 当网格堆叠时，填充仍然存在，但对我来说它应该为 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>

【问题讨论】：

事实上，对我来说，网格缺少 col-ts-*（从小到小）的类集

如果您需要对“小”列进行更多控制，这可能是您的一个选择：gist.github.com/andyl/6360906。但是@otopic 的解决方案有宽度：100%；可能很适合大多数人对这种额外/缺失列大小/控件的要求。

【参考方案1】：

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

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

【讨论】：

这是一个不错的断点，不过你需要添加width:100%

【参考方案2】：

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- *（桌面，1200px 以下的堆栈）。

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

[旧图已移除]

当我测试这个值是否发现不同时：

“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 通过添加媒体查询将堆叠到 480 像素以下（javascript 仅用于说明）

上一个答案

从现在开始，Twitter 的 Bootstrap 定义了三个网格：用于手机的小网格 (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

【讨论】：

谢谢低音，但它确实有效。使用 col-4 它不堆叠，没有 col-4 它开始堆叠 768px，我希望它开始堆叠低于 480px 并保持水平上方。在我这边，它也不会删除填充

@fred_ Bass 的建议适用于堆叠，请参阅 bootply.com/70143 ，还请注意当您将颜色应用于相同元素（即 col 和 col，而不是容器和列）。

你好大卫，在你的例子中，网格开始堆叠在 768 像素。目标是让它在 480 像素以下开始堆叠。这是一个在顶部容器内放置一行的想法，确实是为了填充。它不会删除它，但它看起来更对齐。

Thx Bass，我会将 col-ts-* 添加到 less 文件中以添加另一个断点并具有更多粒度。您更改 @screen-small 的解决方案似乎也有效:)

【参考方案3】：

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

例如：

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

我不太确定你想用这个实现什么，但这就是你如何应用屏幕宽度低于 480 像素的样式。