bootstrap-4 - 在移动 View 上更改 Logo - Bootstrap 4

标签 bootstrap-4 navbar

我在 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/

相关文章:

jquery - Bootstrap 的导航栏下拉菜单无法在自定义断点下方正确打开

html - 垂直 Bootstrap 导航栏按钮未对齐

NavBar 的 jQuery 悬停效果不起作用?

symfony - KnpMenuBundle 不适用于 Bootstrap 4 导航栏

html - 在 bootstrap carousel 上方和下方获取 HR 行

javascript - 有没有办法在打开页面之前更改页面的元素

javascript - 一旦 div 返回其原始点,如何删除粘性类

css - 引导覆盖上视口(viewport)中的中心微调器

css - 风格 Joomla!使用 Bootstrap 4.3 模板,将引导样式添加到自定义样式

html - 网站的自定义导航栏 (html/css)