我正在尝试更新 Bootstrap 中导航栏的样式。如果我只创建一个新文件 main.css,导入 bootstrap.min.css,然后添加我想要的属性,这很容易:
// main.css
.navbar-header {
float: left;
padding: 15px;
text-align: center;
width: 100%;
}
但是,当我尝试将相同的属性放入 navbar.less 然后编译它(而不是使用 main.css)时,更改不起作用:
// bootstrap/less/navbar.less
.navbar-header {
// BEGIN CUSTOM STYLES
float: left;
padding: 15px;
text-align: center;
width: 100%;
// END CUSTOM STYLES
&:extend(.clearfix all);
@media (min-width: @grid-float-breakpoint) {
float: left;
}
}
谁能告诉我为什么会这样?
最佳答案
这是关于 grunt 的问题。我在我的页面中使用了 bootstrap.min.css,而 grunt 没有缩小编译后的 bootstrap.css。
我正在使用 grunt watch
自动编译文件。但是,我使用的默认 grunt 配置没有运行 css:minifyCore 任务。因此,我不得不从这里更新 Gruntfile.js 中的一个部分:
watch: {
src: {
files: '<%= jshint.core.src %>',
tasks: ['jshint:src', 'qunit', 'concat']
},
test: {
files: '<%= jshint.test.src %>',
tasks: ['jshint:test', 'qunit']
},
less: {
files: 'less/**/*.less',
tasks: 'less'
}
},
为此:
watch: {
src: {
files: '<%= jshint.core.src %>',
tasks: ['jshint:src', 'qunit', 'concat']
},
test: {
files: '<%= jshint.test.src %>',
tasks: ['jshint:test', 'qunit']
},
less: {
files: 'less/**/*.less',
tasks: ['less', 'cssmin:minifyCore']
}
},
关于css - Bootstrap - 在 navbar.less 中应用时导航栏更改不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28789322/