Bootstrap 4alpha - Change logo for mobile/desktop/

问题:

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.

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

How would I do this?

回答1:

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> 

回答2:

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

shows you how to use Bootstrap classes to hide or show elements on certain size devices.

for Bootstrap v. 4:

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