Question

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

小320px到768px，中等769px至1034px，大1035px到1280px，和超大1281加上。

与此同时，我不希望该网站打破未来的bootstrap版本升级。关键是客户端在我递交网站并继续使用之后将继续使用引导类，例如col-md- * col-lg- *等。我怎样才能做到这一点？有人可以共享一个css或简单的scss片段（使用Scout新scss）。

非常感谢任何帮助。

Answer 1

永远不要编辑任何引导核心文件，而是使用自定义文件覆盖它们 - ＆gt;这样你可以更新bootstrap。

假设您有一个名为bootstrap的文件夹，其中包含所有引导程序核心sass文件。这会创建一个新的文件夹“custom”。在此文件夹中，将所有文件覆盖为引导程序核心文件（如网格）。在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核心文件

Answer 2

如果您使用的是SCSS，请确保使用的是官方Bootstrap SASS代码。

将它安装到您的项目中（在GitHub上的自述文件中的说明），然后编辑第271行到第307行scss/_bootstrap-variables.scss中定义的变量，编译，这将是所有断点的变化。

如果有版本升级，则每次都需要使用自定义断点重新编译css。

或者，您可以自定义所有设置并在Bootstrap's Website上在线下载自定义版本。您可以保存配置并将其提供给将来可以重复使用的客户端。

Bootstrap自定义断点

2 个答案: