twitter-bootstrap - 在 Bootstrap 页面的移动版本中更改 Logo

Question

在移动版网站中，如何更改 Logo ？我尝试减小移动版 Logo 的图像大小。但我需要更改 Logo 本身。任何人都可以帮助解决它吗？我正在使用媒体查询在 Bootstrap 中为移动版本设置自定义样式

Answer 1

Bootstrap 至 v3

您可以使用 visible-xs 和 hidden-xs 类来根据设备显示不同的 Logo 。

<img class="visible-xs" src="mobile-logo.jpg"> <!-- this one will be visible on mobile -->
<img class="hidden-xs" src="normal-logo.jpg"> <!-- this one will be visible on everything else -->

Bootstrap 4

<img class="d-xs-none" src="mobile-logo.jpg"> <!-- this one will be visible on mobile -->
<img class="d-none d-xs-block" src="normal-logo.jpg"> <!-- this one will be visible on everything else -->

或者如果您使用 Logo 作为背景图像。像这样应该可以工作

@media (max-width: 767.98px) {
  .logo {
    background-image: url(mobile-logo.jpg);
  }
}
@media (min-width: 768px) {
  .logo {
    background-image: url(normal-logo.jpg);
  }
}