html - 引导列？

Question

我对 Bootstrap 列有疑问。当我放大浏览器时，列相互重叠，col-md-7 中的文本位于图像上。

这个问题有解决办法吗？

<div class="row">
   <div class="col-md-5">
     <img id="imgs" src="http://eeee.com" width="120" height="120">
   </div>
   <div class="col-md-7">
     <h3><b>Emma T.</b></h3>
     <p><b>Text</b></p>
     <p class="datetxt">TEXT</p>
     <p class="datetxt">TEXT</p>
   </div>
</div>

Answer 1

当你放大时，列应该堆叠起来，因为它改变了 Bootstrap @media 查询所基于的视口(viewport)宽度。确保使用 img-fluid在图像中使其响应。还要确保在文档 HEAD 标记中设置了比例，否则没有任何响应:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

https://www.codeply.com/go/A6e4GIO7CM

<div class="row">
    <div class="col-md-5">
        <img id="imgs" src="http://placehold.it/620" class="img-fluid">
    </div>
    <div class="col-md-7">
        <h3><b>Emma T.</b></h3>
        <p><b>Text</b></p>
        <p class="datetxt">TEXT</p>
        <p class="datetxt">TEXT</p>
    </div>
</div>