ブートストラップスタイルシートを追加すると左上の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

ブートストラップCSSは、あなたのCSSコードを上書きしています。

あなたは!importantを使用して、あなたのCSSで動作するようにHTMLを強制する必要がありますが、このように進むことができ、次のいずれか

<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; 
    } 

Answer 2

あなたはピクセルに高さを変更し、サイズボックスを変更した場合、それもブートストラップで動作しますします：

<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>