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

时间:2017-09-03 14:57:05

标签: css twitter-bootstrap bootstrap-4

我有一个使用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>

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

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

我该怎么做?

2 个答案:

答案 0 :(得分:2)

如果您正在寻找一个bootstrap-4解决方案,可以通过拥有两个navbar-brand元素来实现,一个隐藏用于较小的设备(@ViewChild('slideItem', {read: ElementRef}) slideItem : ElementRef; ),另一个隐藏用于较大的设备(.hidden-sm-down

.hidden-md-up

答案 1 :(得分:0)

https://getbootstrap.com/docs/3.3/css/#responsive-utilities-classes

向您展示如何使用Bootstrap类隐藏或显示特定大小设备上的元素。

for Bootstrap v.4:

http://v4-alpha.getbootstrap.com/layout/responsive-utilities/