html - 如何在小视口(viewport)上显示图像下方的文字？

Question

我试图在当前浏览器屏幕的每一半上显示每个图像及其描述。这是我的 HTML:

<div class="container">
   <div class="row">
      <div class="col-6">
         <a href="#"><img src="images/img1.jpg" alt="" /></a>
      </div>
      <div class="col-6">
         <p>Here is the description</p>
      </div>
   </div>
</div>

当我调整大小并到达手机视口(viewport)时，图像和文本仍显示在屏幕的每一半。我怎样才能让它们显示在彼此之上，即:文本应该显示在下一行图像的正下方？

Answer 1

col-6 为每个视口(viewport)拆分屏幕。您应该使用 col-sm、col-md、col-lg 或 col-xl，具体取决于哪个您希望添加网格断点的屏幕尺寸。

您可以在这里查看更多信息:https://getbootstrap.com/docs/4.1/layout/grid/