我不喜欢 Bootstrap 的默认断点 1200px 用于screen-lg。有没有办法让我lg断点发生在 1800px 或类似的位置？我不想修改原始的 Bootstrap css 代码，因为我使用的是 bower，并且每当我运行 bower update 时，我都会丢失我的更改。
我知道我应该能够覆盖 Bootstrap 的默认值，尽管使用 grunt、bower 和 Sass，我不确定如何做到这一点。这是<head>块：
<head>
<meta charset="utf-8">
<title>Test</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<!-- build:css(.) styles/vendor.css -->
<!-- bower:css -->
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="bower_components/bootstrapvalidator/dist/css/bootstrapValidator.css" />
<link rel="stylesheet" href="bower_components/eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.min.css" />
<link rel="stylesheet" href="bower_components/card/lib/css/card.css" />
<!-- endbower -->
<!-- endbuild -->
<!-- build:css(.tmp) styles/main.css -->
<link rel="stylesheet" href="styles/main.css">
<link rel="stylesheet" href="styles/order-page.css">
<!-- endbuild -->
</head>
您可以使用 Less（我希望也是 ASS）和命令行 Lessc 编译器来执行此操作，方法是运行：
lessc --modify-var='screen-lg=1800' --modify-var='container-large-desktop=1770' --autoprefix="Android 2.3,Android >= 4,Chrome >= 20,Firefox >= 24,Explorer >= 8,iOS >= 6,Opera >= 12,Safari >= 6' bootstrap.less ../dist/css/bootstrap.css
在上面的1770 = 1740 +排水沟大小。
请注意，您不仅必须安装带有npm install less的 Less 编译器，还必须安装 带有 npm install less-plugin-autoprefix 的 Less 自动前缀器插件。
以上将保证 Bootstrap 将编译成与默认构建过程相同的代码。当然，您也可以在运行上面的lessc命令时设置源映射和压缩选项。
在您的情况下，最佳解决方案取决于如何编译引导程序。由于您正在使用Bower，因此还应该查看 https://www.npmjs.com/package/less-plugin-bower-resolve。这个用于 Less 编译器的插件可帮助您从 Bower 包导入 Less 文件。这为您提供了替代解决方案。
创建一个新的 less 文件，site.less并在其中写下以下 Less 代码：
@import "bootstrap/less/bootstrap";
@screen-lg: 1800px;
// Large screen / wide desktop
@container-large-desktop: (1740px + @grid-gutter-width);
现在，您可以使用以下命令编译site.less：
lessc --bower-resolve -autoprefix="Android 2.3,Android >= 4,Chrome >= 20,Firefox >= 24,Explorer >= 8,iOS >= 6,Opera >= 12,Safari >= 6' site.less site.css
之后可以覆盖@screen-lg和@container-large-desktop，因为 Less 使用延迟加载。
在阅读了@zangrafx和@mijopabe关于这个问题的答案后，我也想知道将最大断点设置为更宽的宽度时您会期望什么。在默认情况下，将发生以下情况：
对于宽度大于 992px 的屏幕，.container类的宽度变为970px，对于宽度超过 1200px 的屏幕，.container类的宽度为 1170 像素。当您部署上面给出的解决方案时，对于 992px 到 1800px 的屏幕尺寸，.container类的宽度变为 970px，对于宽度超过 1800px 的屏幕尺寸，宽度变为 1770 像素。可能您不是在寻找更改最大断点的解决方案，而是在寻找向 Bootstrap 添加更大网格的解决方案。
事实证明，这比我想象的要容易得多。我发誓我以前试过这个，但它没有用，但也许我以前做错了什么。
在主 SCSS 文件中，在顶部，更改以下内容：
$icon-font-path: "../bower_components/bootstrap-sass-official/assets/fonts/bootstrap/";
// bower:scss
@import "bootstrap-sass-official/assets/stylesheets/_bootstrap.scss";
// endbower
对此：
$screen-lg-min: 1800px; /* $screen-lg is deprecated */
$icon-font-path: "../bower_components/bootstrap-sass-official/assets/fonts/bootstrap/";
// bower:scss
@import "bootstrap-sass-official/assets/stylesheets/_bootstrap.scss";
// endbower
@media screen and (min-width: 1800px) {
.container {
width: $new-breakpoint-container-width; /* to be defined above, of course */
}
}
但是，赏金点归Bass Jobsen以获得最详细的答案，以及使用grid-gutter-width设置容器宽度的正确方法。
你可以通过引导更少的变量。如果已下载引导源文件，则可以在该文件夹中找到名为 variables.less 的文件。在文件中查找此内容
// Large screen / wide desktop
//** Deprecated `@screen-lg` as of v3.0.1
@screen-lg: 1200px;
@screen-lg-min: @screen-lg;
并将其更改为您所说的任何屏幕尺寸，然后编译并获得结果。
如果您不想删除/编辑 Bootstrap 的默认文件以便通过 bower 进行更新，您可以创建一个单独的 CSS 文件（custom-bootstrap.css），将其包含在 Bootstrap 之后。 因此，对于 1800px 的最大宽度，请将以下内容包含在该自定义引导程序.css文件中：
.container-fluid {
margin-right: auto;
margin-left: auto;
max-width: 1800px;
}
这将覆盖 Bootstrap 中设置的容器流体，方法是将最大宽度居中并水平设置。
第二个选项（独立于第一个）是 1） 创建第二个主文件（less/scss），2） 包含您想要从 Bootstrap 保留的任何内容（因此所有没有 responsive 1200px-min.less/scss） 的响应文件）。这将运行您拥有的任何内容，3）然后根据需要编写您自己的 1800px 媒体查询。
我要补充一点，你可以简单地在你的主文件中添加一个额外的"断点".css文件。这不会更改 1200px 断点，但会允许容器超过断点。
这样：
@media (min-width: 1800px) {
.container {
width: 1600px;
}
}
呵呵，
-泰德
你可以用不同的方式使用 Bootstrap。将文件bootstrap.less从原始位置复制到less文件夹，并更改内部的路径，如下例所示，变量除外。
// Core variables and mixins
@import "variables.less";
@import "/bower_components/bootstrap/less/mixins.less";
// Reset and dependencies
@import "/bower_components/bootstrap/less/normalize.less";
@import "/bower_components/bootstrap/less/print.less";
...
现在将文件变量.less从原始位置复制到less文件夹，您可以修改所需的任何变量。
在您的 html 中将路径更改为新的引导程序.css文件：
<link href="/styles/bootstrap.css" rel="stylesheet">
在构建过程中编译/your_less/bootstrap.less（而不是/bower_components/bootstrap/less/bootstrap.less），它将从 bower_components 导入您自己的变量 .less 和所有其他原始引导程序文件。
您还可以将其他较少的文件（如 normalize.less）交换到您自己的文件。
我有这个版本，一切都可以在 gulp、源映射和浏览器同步中很好地工作，并且当新版本可用时，我仍然可以在 bower_files 中更新引导程序。