使用 Flexbox 的 Bootstrap 4 中心元素答案

【问题标题】：Bootstrap 4 Center element using Flexbox使用 Flexbox 的 Bootstrap 4 中心元素
【发布时间】：2017-08-06 11:57:43
【问题描述】：

使用 Bootstrap 4 Alpha 6。我有以下标记：

<header class="jumbotron jumbotron-fluid">
  <div class="container">
    <div class="row justify-content-center flex-column-reverse flex-sm-row">
      <div class="col-12 col-sm-6">
        <h1 class="display-4">
          <a class="border-0" href="/@v">Vic</a>
        </h1>
          <p class="lead mb-100">We utilize a default z-index scale in Bootstrap that’s been designed to properly layer navigation, tooltips and popovers, modals, and more.</p>
          <p>
              <svg>...</svg>Boston, MA, US<br>
          </p>
      </div>
      <div class="col-12 col-sm-2">
        <a class="border-0" href="/@v">
          <img class="d-flex rounded-circle avatar--m" alt="Random Name" src="/system/profiles/avatars/000/000/001/avatar_m/firefox-copy-link.jpg?1489589655">
</a>      </div>
    </div>
  </div>
</header>

分别在移动设备和桌面设备上产生以下结果：

移动

桌面

桌面版目前看起来很完美。如何将图像仅在移动上居中？

【问题讨论】：

标签： css twitter-bootstrap bootstrap-4 flexbox

【解决方案1】：

您可以在图像上使用 Bootstrap 4 响应式margin utils。使用mx-auto 居中，然后使用mx-sm-0 将正常边距保持在sm 上。

<img class="d-flex rounded-circle mx-auto mx-sm-0" src="//placehold.it/80">

演示：http://www.codeply.com/go/qDSHKeueac

【讨论】：