css - Bootstrap 自定义断点

Question

我正在使用 bootstrap 3.x 构建客户站点。我有来自客户端的特定 Bootstrap 断点请求:

小 320 像素到 768 像素， 中 769px 到 1034px， 大 1035px 到 1280px，和 特大号1281 plus。

与此同时，我不希望站点因 future 的 Bootstrap 版本升级而中断。关键是在我移交网站并继续前进后，客户端将继续使用 Bootstrap 类，例如 col-md-* col-lg-* 等。我怎样才能做到这一点？有人可以分享一个 css 或简单的 scss 片段(使用 Scout 的 scss 新手)。

非常感谢任何帮助。

Answer 1

永远不要编辑任何 Bootstrap 核心文件，而是用自定义文件覆盖它们 -> 这样你就可以更新 Bootstrap 。

假设您有一个名为 bootstrap 的文件夹，其中包含所有 bootstrap 核心 sass 文件。即创建一个新文件夹“custom”。在此文件夹中放置所有文件以覆盖 Bootstrap 核心文件(如网格)。比在 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 或更少)您可以在保持更新功能的同时覆盖 Bootstrap 核心文件