twitter-bootstrap – 如何在不修改核心文件的情况下修改Bootstrap 3中的断点？

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 autoprefixer plugin.

以上将保证Bootstrap将编译为与默认构建过程相同的代码.当然,您还可以在运行上面的lessc命令时设置sourcemap和compress选项.

您遇到的最佳解决方案取决于如何编译Bootstrap.
由于您使用的是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,Safari >= 6' site.less site.css

由于Less用途lazy loading,之后可以覆盖@ screen-lg和@ container-large-desktop.

在阅读了@zangrafx和@mijopabe关于这个问题的答案后,我也想知道在将最大断点设置为更宽的宽度时你会有什么期望.
在默认情况下会发生以下情况：

对于宽度大于992px的屏幕,.container类的宽度变为970px;对于宽度大于1200px的屏幕,.container类的宽度为1170像素.当您部署上面给出的解决方案时,.container类的宽度变为970px,屏幕尺寸从992px到1800px,屏幕尺寸宽度超过1800px时为1770像素.您可能不是在寻找能够改变最大断点的解决方案,而是寻找adds a larger grid to Bootstrap的解决方案.