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 answer的替代人正在使用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

Answer 2

@TimothyAURA，如果我理解你的问题是正确的，那就是如何将标题的内容集中在较小的屏幕上。如果是这种情况，您可以查看此codeply project中的代码，以了解如何执行此操作。您似乎对Bootstrap有一定的了解，但这里引用了justifying content的Bootstraps实用程序。

它使用justify-content-center类用于设备大小的媒体及以下，并在较大的显示器上使用justify-content-lg-between。

<header class="d-flex justify-content-center justify-content-lg-between">
    <a class="navbar-brand" href="#">
        <img src="http://via.placeholder.com/65x65"  alt="">
    </a>
    <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>
</header>

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

2 个答案: