使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。