更改移动视图上的徽标 - Bootstrap 4

Question

我在 Bootstrap 4 上有一个导航栏。当我在桌面视图中时，我显示徽标“x”，但是当我更改为移动视图时，我需要将徽标“x”更改为徽标“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>

你可以帮帮我吗？

Answer 1

Bootstrap 4 中的.hidden-*类已被删除，但您可以使用显示属性来实现相同的目标。

使用显示属性的解决方案：

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

有用的链接：

• https://getbootstrap.com/docs/4.0/utilities/display/
• Bootstrap 4 响应式实用程序可见/隐藏 xs sm lg 不工作
• https://getbootstrap.com/docs/4.0/migration/#utilities