css - Bootstrap 4alpha - 更改移动/桌面/平板电脑的 Logo

Question

我有一个使用 bootstrap 4 alpha 的 header

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

我想优化我的 Logo 在不同屏幕尺寸上的显示方式。我们有桌面版 Logo 的横向版本和移动版 Logo 的纵向版本。

所以最好的方法似乎是拥有两个版本的 Logo (logo-land 和 logo-port)。但是我不确定如何合并两个 Logo 并让 Bootstrap 类决定显示哪个(我想使用 xs md 等)。

我该怎么做？

Answer 1

如果您正在寻找 bootstrap-4 解决方案，可以通过使用两个导航栏品牌元素来实现，一个隐藏用于较小的设备 (.hidden-sm-down)，另一个隐藏用于较大的设备设备(.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>