10

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

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

3 回答 3

16

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 网格

  • “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

于 2013-07-29T09:42:02.877 回答
4

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

    @media (max-width: 480px) { 
    .col-ts-12 { float: none; }
}
于 2013-10-24T13:11:00.940 回答
0

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

例如：

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

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

于 2014-01-10T23:04:24.003 回答