Question

I can't seem to figure out why both image elements (main logo, one small one large) are displaying all the time. ? Specifically, it seemed like all was well until I hear Firefox isn't showing the large logo.

code:

<a class="navbar-brand visible-lg" href="index.html">
  <img id="header-logo" src="img/dmi-logo.png" width="253" height="138" alt=""/>
</a>
<a class="navbar-brand visible-md visible-sm visible-xs" href="index.html"> 
  <img id="header-logo-sml" src="img/dmi-logo-sec.png" alt=""/>
</a>

I guess the browser renders the code in all cases, but the CSS hides/shows it?

Answer 1

如果它不是Firefox问题，您也可以使用隐藏 - ??

<a class="navbar-brand visible-lg hidden-md hidden-sm hidden-xs" href="index.html">
    <img id="header-logo" src="img/dmi-logo.png" width="253" height="138" alt=""/>
</a>

<a class="navbar-brand hidden-lg visible-md visible-sm visible-xs" href="index.html"> 
      <img id="header-logo-sml" src="img/dmi-logo-sec.png" alt=""/>
</a>

Boostrap queries visible-xx not showing/hiding

1 个答案: