在移动设备上居中显示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 类，但这会导致两个元素在所有宽度（桌面和移动）上都居中于其列中。

正确的方法是什么？

- TimothyAURA

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

- Zim

---

太棒了。正是我需要的，而且非常容易。接下来，我该如何交换图片呢？在移动中心视图中，当图片位于中心时有点小，我能否替换成更大的图片？ - TimothyAURA

想要显示不同的图片，唯一的方法是拥有多个图片（小图和大图），并使用 Bootstrap 4 visibility classes 来交换它们的显示：https://www.codeply.com/go/MOEQeWb6bP - Carol Skelly

我尝试了每一种组合来实现这个目标，只有这个答案似乎能够正常工作！赞+++ - Ælex

Answer 2

如果我正确理解您的问题，@TimothyAURA，那么您想要在较小的屏幕上居中标题内容。如果是这样，您可以查看此codeply项目中的代码，以了解如何实现。似乎您对Bootstrap有一定的熟悉度，但这里提供了Bootstrap工具类的参考“justifying content”。它使用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>

- Jade Cowan

---

我有点困惑，为什么你删除了我的其他元素，比如行和列等？我只想要一个类，在较小的显示器上生效，并将该列中的内容居中对齐。我尝试将这两个类添加到我的行中，但没有任何效果。 - TimothyAURA

那我误解你了。我以为你想在较小的显示器上水平居中元素。 - Jade Cowan