在移动版本的bootstrap页面中更改徽标

时间:2015-04-06 09:17:59

标签: twitter-bootstrap

在网站的移动版中,如何更改徽标?我试过减少移动版徽标的图像尺寸。但我需要改变徽标本身。任何人都可以帮忙解决它吗?我正在使用媒体查询为bootstrap中的移动版本设置自定义样式

1 个答案:

答案 0 :(得分:9)

Bootstrap至v3

您可以使用visible-xs和hidden-xs类来显示不同的徽标,具体取决于设备。

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

或者如果您使用徽标作为背景图片。 这样的Smth应该可以工作

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