Question

要正确替换属性，必须正确理解原点并执行覆盖。

我的结果显示，在bootstrap.css文件中找不到“Chrome开发者工具，Ctrl + Shift + I”类 .container 。它没有显示实际来源。为什么？我该如何解决？

它显示存储在grid.less文件中。那个文件为什么？请求文件夹名称中不存在的文件。确实在引导程序中找不到@include请求。

演示搜索类：

.container {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

结果：

grid.less：10

in ... css / bootstrap-3.3.7-dist / css / less / mixins / grid.less

.container-fixed(@gutter: @grid-gutter-width) {
  margin-right: auto;
  margin-left: auto;
  padding-left:  floor((@gutter / 2));
  padding-right: ceil((@gutter / 2));    // line 10 on grid.less
  &:extend(.clearfix all);
}

Answer 1

Chrome开发者工具很可能会阅读Bootstrap提供的CSS地图。

您可以从资源中删除bootstrap.css.map，也可以在Chrome开发者工具设置Preferences -> Sources -> Enable CSS Source maps

中停用CSS地图

之后，Chrome开发人员工具应该按原样阅读CSS。

您可以在此处详细了解Source Maps以及如何使用

Chrome开发者工具。在bootstrap.css文件中找不到的类，并显示在grid.less虚拟文件中

1 个答案: