css - 将文本 block 和响应图像放在 bootstrap 中的同一行上

标签 css twitter-bootstrap

我正在构建的网站的一部分我想要以下内容: 图像和 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/

相关文章:

html - 如何让我的 CSS 响应式

javascript - Zen Cart 产品 div 上的可点击链接

php - Bootstrap jquery twitter 本地 Bootstrap

javascript - 使用 Bootstrap 的淡入面板

css - 如何让 Flexbox 元素 "main"让 "aside" float 在它旁边?

html - 删除 :before pseudo element when parent has border 的底部边框

html - Outlook 2007 和 2010 中的富 HTML 电子邮件...如何删除上边距?

html - Bootstrap 2.3.2 可折叠导航栏不工作

css - Bootstrap 列宽度问题

html - 如何将过渡效果应用于 Bootstrap 3 导航栏品牌形象?