Twitter Bootstrap：为 xxs 断点添加媒体查询

让我感到惊讶的是，Twitter Bootstrap 没有媒体查询来为移动纵向屏幕构建适当的网站版本。

一件棘手的事情是定义“移动纵向”宽度。以前大多数手机都有320px屏幕宽度，但目前最建议的目标设备是比375px.

iPhone 屏幕分辨率

我至少需要.col-xxs-*断点位于的类375px屏幕宽度，类似于.col-xs-*。这可以是 CSS 或 SCSS 代码。我正在使用 Bootstrap-4-alpha，希望解决方案也适用于 Bootstrap-3。

You can 添加新断点到 BS 4 通过改变$grid-breakpoints and $container-max-widths变量与SASS。

    /* your _custom.scss */

    @import "bootstrap/functions";
    @import "bootstrap/variables";
    @import "bootstrap/mixins";

    $grid-breakpoints: (
      xxs: 0,
      xs: 375px,
      sm: 544px,
      md: 768px,
      lg: 992px,
      xl: 1200px
    );

    $container-max-widths: (
      xxs: 375px,
      xs: 375px,
      sm: 544px,
      md: 768px,
      lg: 992px,
      xl: 1200px
    );

    @import "bootstrap";

http://codeply.com/go/mPS4Yros4U

2018年更新: 现在既然xs-infix 已在 Bootstrap 4 中删除，添加一个新的较小的 xxs 断点意味着这个最低断点没有中缀。例如：

col-6 (50% on xxs)
col-xs-6 (50% on xs)

有关使用 SASS 自定义 Bootstrap 的说明，来自文档...

修改您的任何 Sass 变量和映射自定义.scss.... Bootstrap 4 中的每个 Sass 变量都包含 !default 标志，允许 你可以在你自己的 Sass 中覆盖变量的默认值，而不需要 修改Bootstrap的源代码。根据需要复制并粘贴变量，修改它们的值，并删除 !default 标志。如果一个变量有 已经分配过，则默认不会重新分配 Bootstrap 中的值。