html - 重叠的 Div 部分，无法弄清楚为什么

Question

我正在尝试在我的 bootstrap 网站的底部创建一个联系部分，其中包含一个包含图片的 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>

我原以为当页面尺寸缩小时，图像会随之缩小，或者文本会留在旁边，直到屏幕变得太小然后落在下面。而不是发生这种情况，文本开始与图像重叠

Answer 1

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