我正在构建的网站的一部分我想要以下内容:
图像和 float:right;
div 彼此相邻,如下所示:
============================================
| |
| bla bla text |
| |
| ============ |
| | IMG | Is this the real life? |
| |Responsive| Is this just fantasy? |
| ============ |
============================================
Bootply看问题
我可以使用普通图像来实现此功能,但不能使用响应式图像。 有什么理由这不应该起作用吗?或者解决这个问题的方法?
最佳答案
最简单的方法是使用一个“row”类的 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
关于css - 将文本 block 和响应图像放在 bootstrap 中的同一行上,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35326195/