Html 在 div 中并排引导图像和文本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28185807/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap image and text side by side in a div
提问by marukobotto
I am trying to put an image and texts side by side in bootstrap inside a single div.. For that I used the classof thumbnail. But using bootstrap thumbnail it makes the image to go at the top and all the texts at the bottom.
我想并排放置的图像和文字侧举一个DIV中。对于我所用class的thumbnail。但是使用引导程序缩略图会使图像位于顶部，所有文本位于底部。
So I changed it a bit to put the image and the texts within the thumbnail only and dividing the thumbnail into two parts. But on resizing the screen into small the problem is arising.. The texts are shifting over the image..
所以我稍微改变了一下，只将图像和文本放在缩略图中，并将缩略图分成两部分。但是在将屏幕调整为小尺寸时，问题出现了.. 文本在图像上移动..
Here is the code of what I tried till now
这是我迄今为止尝试过的代码
<div class="row">
<div class="col-sm-6 col-md-6 col-xs-6">
<div class="thumbnail" style="border:none; background:white; height:210px;">
<div class="col-sm-6 col-md-6 col-xs-6">
<img src="images/online_learning.jpg" style="height:200px; margin-left:-15px;" />
</div>
<div class="col-sm-6 col-md-6 col-xs-6">
<h3>Hello World</h3>
<p style="font-size:10px; color:#03225C;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed hendrerit adipiscing blandit. Aliquam placerat, velit a fermentum fermentum, mi felis vehicula justo, a dapibus quam augue non massa. </p>
</div>
</div>
</div>
</div>
回答by vas
Try this
尝试这个
<div class="col-sm-6 col-md-6 col-xs-6">
<div class="thumbnail" style="border:none; background:white;">
<div class="col-sm-6 col-md-6 col-xs-12 image-container">
<img src="images/online_learning.jpg" style="height:200px; margin-left:-15px;" />
</div>
<div class="col-sm-6 col-md-6 col-xs-12">
<h3>Hello World</h3>
<p style="font-size:10px; color:#03225C;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed hendrerit adipiscing blandit. Aliquam placerat, velit a fermentum fermentum, mi felis vehicula justo, a dapibus quam augue non massa. </p>
</div>
</div>
</div>
css code write this in media query if u need only for mobile
如果您只需要移动设备，请在媒体查询中编写 css 代码
.image-container{text-align:center}
in case if u need both the image and text side by side in mobile device, remove the height for the image in media query to mobile devices resolution, give width 100% to the image
如果您需要在移动设备中并排显示图像和文本，请将媒体查询中图像的高度移除为移动设备分辨率，为图像提供 100% 的宽度
回答by Aaron Vanston
You need to make sure you're using div's with the class of rowaround your columns, also if you're going to have col-xs-6 it sets this columns size (6) on the larger sizes too (no need to use col-sm-6 etc also).
您需要确保row在列周围使用 div 的类，此外，如果您要使用 col-xs-6，它也会将此列大小 (6) 设置为较大的大小（无需使用 col -sm-6 等等）。
Try this code:
试试这个代码：
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row" style="border:none; background:white; height:210px;">
<div class="col-xs-6">
<img src="images/online_learning.jpg" style="height:200px; margin-left:-15px;" />
</div>
<div class="col-xs-6">
<h3>Hello World</h3>
<p style="font-size:10px; color:#03225C;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed hendrerit adipiscing blandit. Aliquam placerat, velit a fermentum fermentum, mi felis vehicula justo, a dapibus quam augue non massa.</p>
</div>
</div>