css - 推特 Bootstrap : add media queries for xxs breakpoint

Question

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

一个棘手的事情是定义“移动肖像”宽度。以前大多数手机的屏幕宽度为 320px，但目前最可取的是定位宽度小于 375px 的设备。

iPhone scren resolutions

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

Answer 1

您可以通过使用 SASS 更改 $grid-breakpoints 和 $container-max-widths 变量向 BS 4 添加新断点 .

    /* 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 年更新:现在 Bootstrap 4 中删除了 xs- 中缀，添加一个新的更小的 xxs 断点意味着这个最低断点没有中缀。例如:

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

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

Modify any of the Sass variables and maps in your custom.scss.... Every Sass variable in Bootstrap 4 includes the !default flag allowing you to override the variable’s default value in your own Sass without modifying Bootstrap’s source code. Copy and paste variables as needed, modify their values, and remove the !default flag. If a variable has already been assigned, then it won’t be re-assigned by the default values in Bootstrap.