不更新所有 Bootstrap 个网格断点

Question

我有两个问题： 1. $container-max-width Bootstrap变量有什么用？ 2.如果我需要以下分辨率，我应该如何覆盖变量？

 sm: 0px -> 768px - tablet portrait
 md: 769px -> 1442px - tablet landscape and laptop
 lg: 1443px -> 1920px - large screens

Answer 1

只需在 bootstrap 导入之前导入您的变量，因为这些变量是使用 !default 标志定义的，因此当您的 scss 将转换为 css 时，它将使用您的覆盖值。

$grid-breakpoints: (
  xs: 0,
  sm: 0,
  md: 769px,
  lg: 1443px,
  xl: 1921px
);

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px
) !default;

@import 'bootstrap'

Answer 2

您只需覆盖 $grid-breakpoints 和 $container-max-widths。在导入 bootstrap.

之前写下这些代码

网格断点

// Define the minimum dimensions at which your layout will change,
// adapting to different screen sizes, for use in media queries.

$grid-breakpoints: (
        sm: 0,
        md: 769px,
        lg: 1443px,
) !default;

网格容器

// Define the maximum width of `.container` for different screen sizes.

$container-max-widths: (
        sm: 768px,
        md: 1442px,
        lg: 1920px,
) !default;

不更新所有 Bootstrap 个网格断点

Update not all Bootstrap grid breakpoints

bootstrap-4

bootstrap-grid

网格断点

网格容器