bootstrap-4 - 将内容对齐到小型设备的中心，Bootstrap 4

Question

我有一个简单的 Bootstrap 4 行:

<div class="container">
  <div class="row">
      <div class="col-md-12 p-2">
          <img class="" src="../assets/img/Logo-small.png" alt="">
      </div>            
  </div>

我希望每当我在小型设备(col-sm-12)上查看它时，图像应该居中，但在大型设备(col-md-12)上它应该左对齐。

Answer 1

在图像上使用响应式边距。

<div class="container">
    <div class="row">
        <div class="col-md-12 p-2">
            <img class="d-block mx-auto mx-md-0" src="//placehold.it/200" alt="">
        </div>
    </div>
</div>

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

或者，响应式文本对齐列...

<div class="container">
    <div class="row">
        <div class="col-md-12 text-center text-md-left p-2">
            <img class="" src="//placehold.it/200" alt="">
        </div>
    </div>
</div>

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

阅读有关 Bootstrap 实用程序类的信息:
http://getbootstrap.com/docs/4.1/utilities