html - 在小宽度上重叠

Question

我有下一个代码，我不知道为什么它没有响应。当我在小宽度设备上查看设计时，它的内容重叠在图像上，我该怎么做才能将内容放在一边图像随时停止重叠。

  <div class="row">

        <div>
            <div class="col-xs-5">
                <img class="rounded-circle" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" width="140"
                    height="140">
            </div>
            <div class="col-xs-7">
                <p>JMy name is text</p>
                <p>Hello here I am </p>
            </div>
        </div>



        </div>

Answer 1

只需在图片上添加img-responsive类即可:

Bootstrap :http://www.bootply.com/6qzeuI7c5J

HTML:

 <div class="row">
    <div>
        <div class="col-xs-5">
            <img class="rounded-circle img-responsive" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" width="140" height="140">
        </div>
        <div class="col-xs-7">
            <p>JMy name is text</p>
            <p>Hello here I am </p>
        </div>
    </div>
    </div>