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课程：

Bootply ：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>

小宽度重叠

1 个答案: