css - 为什么我的图像现在这么大？

Question

我是一名中级后端开发人员，总是尝试自己解决问题并且通常会解决问题，但是把问题写出来是有力量的!以前可能有人说过，但它就像rubber-ducking .

无论如何，突然间我的 boostrap(上帝，我永远不会拼写那个词)，booTstrap，用 .brand 类设置样式的图像是巨大的，覆盖了整个屏幕。

当我用 Chrome 检查它时，我正在寻找与宽度和大小相关的样式，但找不到它们。我去取消选中各种规则，看看有什么变化，但大小没有变化!

<%= link_to( (image_tag "Hockey_Protege_A_white.png", alt: "brand"), root_path, class: "navbar-brand" ) %>

---

更新1

在一个正常工作的分支上，我找到了它使用的 CSS 并取消选中它，果然它看起来就像在损坏的分支上一样。

.app-navbar .navbar-brand img {
    width: 85px;
}

Answer 1

好的，所以我意识到我错误地没有将应用程序级别的样式复制到 application.scss :(

一旦我添加了这个(用户已经建议但删除了他们的答案，因为我说我希望它“开箱即用”并且错误地认为我不需要任何额外的样式:( )，它起作用了:

.app-navbar .navbar-brand img {
  width: 85px;
}

我仍然很困惑，因为 Bootstrap (gem 'bootstrap', '~> 4.0.0.beta') 样式表正在加载并且它们有一个 .navbar-brand 类，所以如果它没有在 application.scss 中找到样式，为什么它不能在 @import "bootstrap"; 中找到它们？