当我添加引导样式表时，我的左上角 PNG 变得不可见

Question

我的图像 (.png( 格式工作正常，但是一旦我将引导库添加到 html，图像就会变得不可见，但链接仍然有效。

.CSS：

.menu-icon img {
width: 14vw;
height: 5vh;
padding-bottom: 20%;
padding-top: 10%;
padding-left: 4%;
position: block;
}

.HTML：

<a href="index.html" class="menu-icon">
<img src="img/image.png">
</a>

注意：其他图像.png仍然有效，但较小且位于菜单底部。

Answer 1

如果您将高度更改为像素并修改框大小，即使使用引导程序，它也可以工作：

<style type="text/css">
.menu-icon img {
width: 14vw;
height: 55px;
padding-bottom: 20%;
padding-top: 10%;
padding-left: 4%;
position: block;
box-sizing: content-box !important;
}
</style>

Answer 2

Bootstrap CSS 正在覆盖您的 CSS 代码。

你应该强制html使用你的CSS！important你可以像这样继续：

<a href="index.html" class="menu-icon">
<img src="img/image.png" style="width: 14vw !important;"> <!-- do the rest of styling yourself while adding !important
</a>

或者按照@kblau建议的那样在 CSS 中执行此操作：

.menu-icon img {
width: 14vw;
height: 55px;
padding-bottom: 20%;
padding-top: 10%;
padding-left: 4%;
position: block;
box-sizing: content-box !important;
}