Bootstrap 4 更改断点 [英] Bootstrap 4 Change Breakpoints

问题描述

我有一个应用程序，其中的设计分别要求从台式机到平板电脑或从 xl 到 lg 的 1280 断点.但是，Bootstrap 本身在 1200 处有 xl 断点.

I have an application where the design calls for a 1280 breakpoint from desktop to tablet, or, xl to lg respectively. However, Bootstrap itself has the xl breakpoint at 1200.

我需要为引导程序全局更改该 xl 断点.我是否必须从源文件重新编译 Bootstrap 4?

I need to change that xl breakpoint globally for bootstrap. Do I have to recompile Bootstrap 4 from the source files?

我尝试在我的 Sass 版本中设置它:

I tried setting this in with my Sass build:

$grid-breakpoints: (
  // Extra small screen / phone
  xs: 0,
  // Small screen / phone
  sm: 576px,
  // Medium screen / tablet
  md: 768px,
  // Large screen / desktop
  lg: 992px,
  // Extra large screen / wide desktop
  xl: 1280px
);

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

但是，全局 xl 的断点没有任何变化，它仍然会在 1200 像素宽处进行断点.

However, nothing changed with the breakpoint for xl globally, it still would do the break instead at 1200px wide.

推荐答案

Bootstrap 4.x &5.x

您需要在导入 Bootstrap 源之前覆盖 $grid-breakpoints 和 $container-max-widths 变量.这是一个工作示例 (scss):

Bootstrap 4.x & 5.x

You need to override the $grid-breakpoints and $container-max-widths variables BEFORE importing the Bootstrap sources. Here a working example (scss):

// File: theme.scss
// Override default BT variables:
$grid-breakpoints: (
        xs: 0,
        sm: 576px,
        md: 768px,
        lg: 992px,
        xl: 1200px,
        xxl: 1900px
);
    
$container-max-widths: (
        sm: 540px,
        md: 720px,
        lg: 960px,
        xl: 1140px,
        xxl: 1610px
);
    
// Import BT sources
@import "../node_modules/bootstrap/scss/bootstrap";

// Your CSS (SASS) rules here...

这篇关于Bootstrap 4 更改断点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！