Twitter Bootstrap:为 xxs 断点添加媒体查询 [英] Twitter Bootstrap: add media queries for xxs breakpoint

问题描述

我很惊讶 Twitter Bootstrap 没有为移动纵向屏幕构建合适的网站版本的媒体查询.

I was surprised that Twitter Bootstrap does not have media queries for building an adequate website version for mobile portrait screens.

一个棘手的事情是定义移动肖像"宽度.以前大多数手机都有 320px 屏幕宽度，但目前最可取的是定位比 375px 窄的设备.

A tricky thing is to define "mobile portrait" width. Previously most phones had 320px screen width, but currently most advisable is to target devices narrower than 375px.

iPhone 屏幕分辨率

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

I need at least .col-xxs-* classes with a breakpoint at 375px screen width, similar to .col-xs-*. This can be CSS or SCSS code. I'm using Bootstrap-4-alpha, hope solution will work for Bootstrap-3 too.

推荐答案

您可以通过更改 $grid-breakpoints 和 来添加新断点到 BS 4>$container-max-widths 变量与 SASS.

You can add a new breakpoint to BS 4 by changing the $grid-breakpoints and $container-max-widths variables with 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- 中缀已在 Bootstrap 4 中删除，添加一个新的更小的 xxs 断点意味着这个最低断点没有中缀.例如:

Update 2018: Now that the xs- infix has been removed in Bootstrap 4, adding a new smaller xxs breakpoint means that this lowest breakpoint has no infix. For example:

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

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

修改 custom.scss 中的任何 Sass 变量和映射.... Bootstrap 4 中的每个 Sass 变量都包含 !default 标志，允许您可以在自己的 Sass 中覆盖变量的默认值，而无需修改 Bootstrap 的源代码.根据需要复制和粘贴变量，修改它们的值，并移除 !default 标志.如果一个变量有已经分配，​​那么默认不会重新分配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.

这篇关于Twitter Bootstrap:为 xxs 断点添加媒体查询的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！