移动设备上的Bootstrap 4中心标题元素

Question

这是我的标题设置(bootstrap 4):

<div class="container">
<div class="row">
<div class="col-md-6">
  <div class="navbar-brand"><img src="..."></div>
</div>
<div class="col-md-6 text-right">
  <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:123">Ph : <strong>...</strong></a>
  <div class="header-address">XXX</div>
</div>
</div>
</div>

正如桌面上预期的那样,徽标位于左侧,按钮位于右侧.

在较小的设备上,我希望徽标和按钮在中心对齐.

我曾尝试在.text-md-center两个列中添加一个 类,但这会导致两个元素在所有宽度(桌面和移动)的列中居中.

这样做的正确方法是什么？

Answer 1

@cwanjt 答案的替代方法是使用text-center.然后,您需要使用text-md-left并text-md-right在较大的宽度上保持所需的对齐.

<div class="container">
    <div class="row">
        <div class="col-md-6 text-md-left text-center">
            <div class="navbar-brand"><img src="//placehold.it/140x30"></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:123">Ph : <strong>...</strong></a>
                <div class="header-address">XXX</div>
            </div>
        </div>
    </div>
</div>

https://www.codeply.com/go/Ijl31XHfRT