使用已编译的变量覆盖Bootstrap

时间:2013-10-21 12:14:00

标签: twitter-bootstrap override collapse nav

我试图在variables.less文件中覆盖@grid-float-breakpoint :. (为了调整顶部菜单的折叠宽度)

在我的索引文件中,我将导入Bootstrap核心文件css文件:

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">

然后我将导入已编译和调整后的变量文件。

<link rel="stylesheet/less" type="text/css" href="less/variables.less">

为什么我的变量无法覆盖bootstrap.min.css?

1 个答案:

答案 0 :(得分:2)

无法以这种方式覆盖变量,因为它们已经编译为CSS。 Less是预处理器,因此您需要覆盖它们,然后编译并包含已编译的css。为此,您可以使用各种命令行工具(我使用http://gruntjs.com/https://npmjs.org/package/grunt-contrib-less)或有应用程序!

请注意,您需要一个包含自定义值的单独的less文件,然后在导入变量后导入它。例如。

@import "bootstrap.less"; /* Imports all the bootstrap less files in the correct order, including variables.less */
@import "custom-variables.less"; /* Your custom less variables */ 

有关详细信息,请参阅此答案Overriding Bootstrap LESS variables after @import