Bootstrap 4更改断点

css CSS

小宇宙小宇宙

2020-03-23

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

我需要全局更改该xl断点以进行引导。我是否必须从源文件重新编译Bootstrap 4？

我尝试在我的Sass构建中设置它：

$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的断点没有任何变化，它仍然会在1200px宽处进行断点。

第2589篇《Bootstrap 4更改断点》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共3个回答
小小阿飞 2020.03.23

在导入Bootstrap源之前，您需要覆盖$grid-breakpoints 和 $container-max-widths变量。这是一个工作示例（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...
猴子村村 2020.03.23

根据他们的文档，要自定义Bootstrap，您需要：

  1. 复制/粘贴/scss/_variables.scss到_custom.scss要修改的内容
  2. !default从粘贴的代码中删除任何内容，然后将值更改为所需的值
  3. 重新编译（请参阅Build tools）-您需要成功运行npm run dist才能从源代码进行重建。

您不应该修改其中的任何内容，_variables.scss因为升级Bootstrap时，这些更改将丢失。通过上述步骤，您可以安全地升级Bootstrap并保留您的Mod。

注意：即使您不关心升级，而是想要直接在中进行修改/scss/_variables.scss，您仍然需要重新编译以将更改应用于/dist/文件。

老丝 2020.03.23

更改$grid-breakpoints变量可以正常工作。请记住，你必须导入/bootstrap或bootstrap/variables在custom.scss，然后@import引导后。

例如：

$grid-breakpoints: (
  xs: 0,
  sm: 600px,
  md: 800px,
  lg: 1000px,
  xl: 1280px
);

演示：https：//www.codeply.com/go/MlIRhbJYGj

另请参阅：如何使用SASS扩展/修改（自定义）Bootstrap 4

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android