Bootstrap 4：在不同屏幕尺寸上移位的图像上的文本

Question

我希望文字在我的图片上看起来像这样： 这稍微远离图像的“中心”点（因为我想避开图像中的手机），所以文本中心无法工作。我目前将行的划分设置为“relative”，将文本设置为“Absolute”，以便甚至将文本放在图像的顶部。但是当我调整图像大小时，它会被取代。

代码：

<section>
  <div class="col-lg-12 text-center"style="margin: 0;padding: 0;position: relative;">
    <img class="img-fluid" style="width:100%;" src="img/phone-transparent.png" alt=""></img>
    <h2 style="color:red;position: absolute; top: 120px; width: 100%;">This is also</br>available on your mobile.</h2>
  </div>
</section>

在原始屏幕上：

在不同的屏幕上：

Answer 1

这可以仅使用Bootstrap 4类来完成。 阅读using the grid上的文档和utility classes for positioning and flexbox。您不需要所有内联CSS样式。

<div class="container-fluid">
    <section class="row no-gutter align-items-center">
        <div class="col-lg-12 text-center p-0 d-flex align-items-center">
            <img class="img-fluid position-relative mx-auto" src="//placehold.it/1900x400" alt="">
            <h3 class="w-100 position-absolute text-danger my-auto">This is also<br>available on your mobile.</h3>
        </div>
    </section>
</div>

Demo

  

请记住，.col-* 必须放在.row和.row中   应该在容器内。

您可以使用图片上的spacing utils和CSS object-fit来获取位置和尺寸：Demo 2（你需要根据需要进行调整）