我知道我应该能够覆盖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>
解决方法
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的解决方案.