Question

我正在尝试更新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;
    }
}

谁能告诉我为什么会这样？

Answer 1

这是一个关于咕噜声的问题。我在我的页面中使用了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']
  }
},

Bootstrap - 在navbar.less中应用时，导航栏更改无效

1 个答案: