制作 Bootstrap (4.4.1) 卡片在其周围环绕正文文本

Question

我目前在我的网站主页上有一张这样的卡片，我希望它左对齐，但不占用太多水平空间。最重要的是，我希望将文本包裹在卡片周围而不是完全分开，类似于下图中的简单图像插入。

以下是我当前的卡代码。我不确定是否需要在 HTML 或 .css 文件中进行更改。

<div class="col-md-4 text-center offset-4">
  <div class="card">
    <div class="card-body">
      <img src="images/960px-Reality_check_ESA384313.jpg" width="250" height="180" alt="Man Wearing VR Headset" />
      <hr>
      <p> Researchers with the European Space Agency in Darmstadt, Germany, equipped with a VR headset and motion controllers, demonstrating how astronauts might use virtual reality in the future to train to extinguish a fire inside a lunar habitat. </p>

      <a class="nav-link" href="tech1.html">Learn More About VR Tech</a>

    </div>
  </div>
</div>

Answer 1

也许你可以在图片上试试这个课程float-left。