在div中并排引导图像和文本

Question

我想并排放置的图像和文字侧举一个DIV中.对于我所用class的thumbnail.但是使用bootstrap缩略图会使图像位于顶部,所有文本位于底部.

所以我稍微改了一下,只将图像和文本放在缩略图中,并将缩略图分成两部分.但是在将屏幕调整为小的问题时,问题就出现了..文本正在转移到图像上.

这是我到现在为止所尝试的代码

<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>

截图没有调整大小

调整大小后的屏幕截图

Answer 1

试试这个

<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代码在媒体查询中写这个

.image-container{text-align:center}

如果您需要在移动设备中并排显示图像和文本,请将媒体查询中图像的高度移至移动设备分辨率,为图像提供100%的宽度

Answer 2

你需要确保你在row列周围的类中使用div ,如果你要使用col-xs-6,它也会在更大的尺寸上设置这个列大小(6)(不需要使用col -sm-6等也).

试试这段代码:

<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>