0

我试图在当前浏览器屏幕的每一半上显示每个图像及其描述。这是我的 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>

当我调整大小并到达手机视口时，图像和文本仍然显示在屏幕的每一半。如何使它们彼此重叠显示，即：文本应显示在下一行图像的正下方？

4

3 回答 3

1

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

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

于 2019-09-13T18:27:10.417 回答
0

您正在使用引导程序，因此只需使用响应式实用程序类中的烘焙；

<div class="container">
   <div class="row">
      <div class="col-12 col-md-6">
         <a href="#"><img src="images/img1.jpg" alt="" /></a>
      </div>
      <div class="col-12 col-md-6">
         <p>Here is the description</p>
      </div>
   </div>
</div>
于 2019-09-13T18:26:53.103 回答
0

将这些断点用于移动设备 @media(max-width:600px) //用于移动设备 @media(min-width:600px) //用于笔记本电脑屏幕

然后使用网格属性参考：网格属性

于 2019-09-13T18:37:52.080 回答