Bootstrap 4alpha-更改手机/台式机/平板电脑的徽标 [英] Bootstrap 4alpha - Change logo for mobile/desktop/tablet
问题描述
我有一个使用bootstrap 4 alpha的标题
I have a header using bootstrap 4 alpha
<div class="container">
<div class="row">
<div class="col-md-6 text-md-left text-center">
<div class="navbar-brand"><img src="/wp-content/themes/tarps/assets/img/logo.png">
</div>
</div>
<div class="col-md-6 text-md-right text-center">
<div class="header-btn-grp">
<div class="header-call-us">Get a Quote, Call Today!</div>
<a role="button" class="btn btn-danger btn-lg header-btn" href="tel:08XXXXXXX">Ph : <strong>(08) XXX XXXX</strong></a>
<div class="header-address">XXXX</div>
</div>
</div>
</div>
</div>
我想优化徽标在不同屏幕尺寸上的显示方式.我们有用于桌面的徽标的横向版本和用于移动设备的纵向版本.
I want to optimize the way my logo is displayed on different screen sizes. We have a landscape version of the logo for desktop and a portrait version for mobile.
因此,最好的方法似乎是使用两个版本的徽标(logo-land和logo-port).但是我不确定如何将两个徽标结合在一起,并让引导程序类确定要显示的内容(我想使用xs md等).
So the best way seems to be to have two versions of the logo (logo-land and logo-port). However I'm not sure how to incorporate both logos and let bootstrap classes decide which is displayed (I guess using xs md etc).
我该怎么做?
推荐答案
如果您正在寻找bootstrap-4解决方案,则可以通过具有两个navbar品牌元素来实现,其中一个元素隐藏在较小的设备(.hidden-sm-down
)和一个隐藏在较大设备(.hidden-md-up
)上.
If you are looking for a bootstrap-4 solution this could be achived by having two navbar-brand elements, one hidden for smaller devices (.hidden-sm-down
) and one hidden for larger devices (.hidden-md-up
).
<div class="navbar-brand hidden-sm-down"><img src="logo-land.png"></div>
<div class="navbar-brand hidden-md-up"><img src="logo-port.png"></div>
这篇关于Bootstrap 4alpha-更改手机/台式机/平板电脑的徽标的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!