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 text-center text-md-left p-2">
            <img class="" src="//placehold.it/200" alt="">
        </div>
    </div>
</div>

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

或者，响应文本对齐col ...

pd.DataFrame.plot()

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

阅读Bootstrap util类： http://getbootstrap.com/docs/4.1/utilities

Answer 2

将这些类用于该列。

d-flex 以显示 flex
justify-content-center 在小屏幕上将其内容对齐。
justify-content-md-start 将其内容与左侧对齐。基本上，它会重置内容从center到left的对齐方式。

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col col-md-12 d-flex justify-content-center justify-content-md-start">
      <img  src="//placehold.it/250" alt="">
    </div>
  </div>
</div>

将内容对齐到小型设备的中心，bootstrap4

2 个答案: