Question

我试图将图像和文本并排放在单个div中的bootstrap中。为此，我使用了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>

Screenshot without resizing

Screenshot after resizing

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等）。

试试这段代码：

＆＃13;

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

＆＃13;

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

2 个答案: