html - 使用 Container-Fluid 的重叠列 Bootstrap

Question

尝试构建一个网页，其中我有一半的页面图像和另一半的文本。

到目前为止，这就是我所拥有的，我可以正常工作，只是当我缩小页面时，文本与照片重叠。

.css 文件:

.z-img{
padding: 0 0 10px 0;
border: none;
border-radius: 0;
position: fixed;
}
.z-content {
padding: 70px 0 10px 0;
color: #c0d1ca
}

html文件:

<div class="container-fluid">
<div class="row">
    <div class="span6">
        <div class="z-img">
            <img src="...." width="732" height="432">
    </div>
</div>
    <div class="span6  text-center">
        <div class="z-content">
            <div class="well">
                <h2> About Me: </h2>
            </div>
            <div>
                <blockquote>
                   <p>............</p>
                </blockquote>
            </div>
       </div>
   </div>
   </div>

我想确保当我在移动设备上缩小页面时，我不希望文本与图像重叠。也可以根据屏幕尺寸缩小和放大图像而不是将其作为静态尺寸？不过我确实希望它能覆盖一半的页面

Answer 1

我已经弄明白了，我只需要将 class="img-responsive"标签添加到我的照片标签中。