Question

我正在构建的网站的一部分我想要以下内容：一个图像和一个float:right; div彼此相邻，如下所示：

============================================
|                                          |
|  bla bla text                            |
|                                          |
| ============                             |
| | IMG      |     Is this the real life?  |
| |Responsive|      Is this just fantasy?  |
| ============                             |
============================================

Bootply查看问题

我可以使用普通图像进行此操作，但不能使用响应图像。有什么理由不适用吗？还是绕过这个？

Answer 1

最简单的方法是让div包含一个“行”类，其中包含另外两个div，如下所示：

<div class="container-fluid">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
<div class="row">
    <div class="col-md-4"><img class="img-responsive" src="http://placehold.it/400x120"></div>
    <div class="col-md-8">I want to be on the right side of the responsive image</div>
</div>

这样您就可以确保布局也适应屏幕尺寸。在移动设备或平板电脑上时，图像和文本将叠加在一起，以便于阅读。您可以在此处查看此操作：http://www.bootply.com/h5BGLsTqYd

在引导程序中的同一行放置一个文本块和一个响应图像

1 个答案: