CSS Bootstrap 4 更改断点
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/47747208/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap 4 Change Breakpoints
提问by smb
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 到 lg 的 1280 断点。但是，Bootstrap 本身在 1200 处有 xl 断点。
I need to change that xl breakpoint globally for bootstrap. Do I have to recompile Bootstrap 4 from the source files?
我需要为引导程序全局更改该 xl 断点。我是否必须从源文件重新编译 Bootstrap 4？
I tried setting this in with my Sass build:
我尝试在我的 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
);
However, nothing changed with the breakpoint for xl globally, it still would do the break instead at 1200px wide.
但是，全局 xl 的断点没有任何变化，它仍然会在 1200px 宽处进行中断。
采纳答案by Zim
Changing the $grid-breakpointsvariable will work fine. Remember that you must import /bootstrapor the bootstrap/variablesin the custom.scss, and then @import bootstrap after.
更改$grid-breakpoints变量将正常工作。请记住，您必须 import/bootstrap或bootstrap/variablesin custom.scss，然后 @import bootstrap之后。
For example:
例如：
$grid-breakpoints: (
xs: 0,
sm: 600px,
md: 800px,
lg: 1000px,
xl: 1280px
);
Demo: https://www.codeply.com/go/MlIRhbJYGj
演示：https: //www.codeply.com/go/MlIRhbJYGj
Also see: How to extend/modify (customize) Bootstrap 4 with SASS
回答by kxo
You need to override the $grid-breakpointsand$container-max-widthsvariables BEFORE importing the Bootstrap sources. Here a working example (scss):
您需要在导入 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...
回答by tao
According to their documentation, in order to customize Bootstrap you need to:
根据他们的文档，为了自定义 Bootstrap，您需要：
- copy/paste from
/scss/_variables.scssto_custom.scsswhatever you want to modify - remove any
!defaultfrom the pasted code and change the values to what you want - recompile (see Build tools) - you need to successfully run
npm run distto rebuild from source.
- 复制/粘贴
/scss/_variables.scss到_custom.scss任何你想修改的地方 !default从粘贴的代码中删除任何内容并将值更改为您想要的值- 重新编译（请参阅构建工具） - 您需要成功运行
npm run dist才能从源代码重建。
You're not supposed to modify anything inside _variables.scssas you will lose those changes upon upgrading Bootstrap. With the steps above, you can safely upgrade Bootstrap and keep your mods.
您不应该修改内部的任何内容，_variables.scss因为升级 Bootstrap 后您将丢失这些更改。通过上述步骤，您可以安全地升级 Bootstrap 并保留您的模组。
Note:Even if you don't care about upgrading, and you want to modify directly in /scss/_variables.scss, you still need to recompile to apply the changes to your /dist/files.
注意：即使您不关心升级，并且想直接在 中修改/scss/_variables.scss，您仍然需要重新编译以将更改应用于您的/dist/文件。
