我在 bootstrap 4 上有一个导航栏。当我在桌面 View 中时,我显示 Logo “x”,但是当我更改为移动 View 时,我需要将 Logo “x”更改为 Logo “y”。我尝试了下一个“解决方案”,但它不起作用。
<a class="navbar-brand hidden-sm-down">
<img src="./assets/img/genesyst-logo.png">
</a>
<a class="navbar-brand hidden-md-up">
<img src="./assets/img/genesyst-logo-wh.png">
</a>
你能帮帮我吗?
最佳答案
使用 Bootstrap 4 .hidden-*
类被移除,但您可以使用 display property 来实现相同的目标。
使用显示属性的解决方案:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<a class="navbar-brand">
<!-- logo for large screen -->
<img class="d-none d-md-block" src="https://via.placeholder.com/400x90?text=big+logo" />
<!-- logo for small screen -->
<img class="d-md-none" src="https://via.placeholder.com/200x90?text=small+logo" />
</a>
有用的链接:
关于bootstrap-4 - 在移动 View 上更改 Logo - Bootstrap 4,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61993283/