我正在使用 bootstrap 3.x 构建客户端站点。我有来自客户端的特定引导断点请求：
小 320px 到 768px, 中等 769 像素到 1034 像素， 大 1035px 到 1280px，和 特大号 1281 plus。
同时，我不希望网站因未来的引导版本升级而中断。关键是在我提交网站并继续前进后，客户将继续使用引导类，例如 col-md-* col-lg-* 等。我怎样才能做到这一点？有人可以分享一个 css 或简单的 scss sn-p（使用 Scout 的 scss 新手）。
非常感谢任何帮助。
【问题讨论】：
标签： css twitter-bootstrap sass breakpoints
永远不要编辑任何引导程序核心文件，而是用自定义文件覆盖它们 -> 这样您就可以更新引导程序。
假设您有一个名为 bootstrap 的文件夹，其中包含所有 bootstrap 核心 sass 文件。即创建一个新文件夹“自定义”。在此文件夹中放置所有文件以覆盖引导核心文件（如网格）。比在 sass 文件夹中创建你的 style.scss
sass
-bootstrap-sass
- bootstrap.scss
- bootstrap
- alert.scss
- ...
-custom
- custom-grid.scss
-style.scss
现在在你的 custom-grid.scss 中放入这个并用你的值替换它：
$screen-xs: 480px !default;
//** Deprecated `$screen-xs-min` as of v3.2.0
$screen-xs-min: $screen-xs !default;
//** Deprecated `$screen-phone` as of v3.0.1
$screen-phone: $screen-xs-min !default;
// Small screen / tablet
//** Deprecated `$screen-sm` as of v3.0.1
$screen-sm: 768px !default;
$screen-sm-min: $screen-sm !default;
//** Deprecated `$screen-tablet` as of v3.0.1
$screen-tablet: $screen-sm-min !default;
// Medium screen / desktop
//** Deprecated `$screen-md` as of v3.0.1
$screen-md: 992px !default;
$screen-md-min: $screen-md !default;
//** Deprecated `$screen-desktop` as of v3.0.1
$screen-desktop: $screen-md-min !default;
// Large screen / wide desktop
//** Deprecated `$screen-lg` as of v3.0.1
$screen-lg: 1200px !default;
$screen-lg-min: $screen-lg !default;
//** Deprecated `$screen-lg-desktop` as of v3.0.1
$screen-lg-desktop: $screen-lg-min !default;
在你的 style.scss 中导入所有文件：
// Core Bootstrap
@import "bootstrap-sass/_bootstrap.scss";
// Overwrite bootstrap
@import "custom/custom-grid.scss
...
我想说的是，这样（如果使用 sass 或更少）您可以覆盖引导核心文件，同时保留更新功能
【讨论】：
如果您使用的是 SCSS，请确保您使用的是官方的 Bootstrap SASS 代码。
将它安装到您的项目中（GitHub 上的自述文件中的说明），然后编辑第 271 到 307 行中定义的变量scss/_bootstrap-variables.scss，编译，这将是整个更改的所有断点。
如果有版本升级，您将需要每次使用自定义断点重新编译 css。
您也可以自定义所有设置并在Bootstrap's Website 上在线下载自定义版本。您可以保存配置并将其提供给将来可以重复使用的客户。
【讨论】：