html - 从图像向下和向右重新对齐颜色容器

Question

带有颜色容器的图像正下方

我有一个包含在一些引导类和自定义类中的图像round-img-wrapper。我正在尝试将容器重新对齐到 ~1em向下和 ~1em到我在此处附加的图像的右侧。实现这一目标的最佳方法是什么？

.round-img-wrapper {
  border-radius: 1em;
  background-color: rgba(71, 149, 224, 1);
}

<div class="container">
  <div class="row justify-content-between">
    <div class="col-lg-5" data-aos="fade-right">
      <div class="row justify-content-center align-items-center h-100">
        <div class="col-md-8 col-lg-10 my-3 mx-3 py-4 px-4">
          <div class="round-img-wrapper">
            <img src="https://i.stack.imgur.com/sBepG.png" class="rounded" alt=""><br><br>
          </div>
        </div>
      </div>
    </div>

标签： htmlcsstwitter-bootstrapbootstrap-4