时间戳

首页 > 解决方案 > 重叠的 div 部分，不知道为什么

html - 重叠的 div 部分，不知道为什么

问题描述

我正在尝试在我的引导网站底部创建一个联系部分，其中 col-md-3 包含一张图片，col-md-9 旁边带有信息

除非我使窗口变小，否则文本开始与图片重叠，而不是坐在图片下方或旁边

我已经尝试使图像具有响应性，并寻找其他方法将其保持在旁边，但我无法弄清楚问题所在。

我确定我错过了一些非常简单的东西，非常感谢任何帮助

我已经在这个网站上搜索了重叠的 div 问题，并尝试了一些东西，但似乎没有任何效果

<section class="contact bg-grey" id="contact">
      <div class="container">
        <h2 class="contact-header">Contact Me:</h2>

        <div class="row">
            <div class="col-sm-3">


            <img src="img/me.png" class="responsive" id="bio">

            </div>
            <div class="col-sm-9" id="contact_details">
                <h3 class="contact-header">John Gillespie</h3>
                <p>Email: johngillespiexxx@gmail.com</p>
                <p>Phone: 07xxxxxxxxx</p>
                <p>Twitter: @jxhngillespie</p>
            </div>
        </div>



      </div>
    </section>

我期待当页面尺寸缩小时，图像会随之缩小，或者文本会一直保持在一边，直到屏幕变得太小然后掉到下面。而不是发生这种情况，文本开始与图像重叠

标签： htmlcssrow

解决方案

如果添加style="max-width: 100%"到img，它将防止图像溢出其列（100%相对于列的宽度）。默认情况下，除非您以这种方式限制图像，否则图像始终以全分辨率显示。

推荐阅读