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查询所基于的视口宽度。确保在图像中使用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>

Answer 2

首先，设定宽度＆amp;单独使用bootstrap col中的高度图像是一个坏主意，我建议将其更改为：

<img id="imgs" src="http://eeee.com" style="max-height: 120px;" class="img-fluid">

添加.img-fluid类会导致图像向上/向下缩放以正确放入col＆amp;容器。

我希望这有帮助！

Bootstrap colums

2 个答案: