我在Bootstrap中有一个基本的响应式布局,其中图像位于文本块旁边。在第一行中,图像在左侧,在第二行中,图像在右侧。这在页面下方重复发生。
问题在于:当用户使用移动设备时,图像变为全宽(应该如此),但对于任何将图像对齐到右侧的行,它会位于文本下方而不是上方(请参见下面的代码)。我理解为什么会出现这种情况,但想知道是否有Bootstrap中的类可以纠正这个问题?这肯定很常见,那么这里建议的最佳实践是什么?
问题在于:当用户使用移动设备时,图像变为全宽(应该如此),但对于任何将图像对齐到右侧的行,它会位于文本下方而不是上方(请参见下面的代码)。我理解为什么会出现这种情况,但想知道是否有Bootstrap中的类可以纠正这个问题?这肯定很常见,那么这里建议的最佳实践是什么?
<div class="container">
<div class="row feature">
<div class="col-sm-6 col-md-6">
<img src="url" class="img-responsive"/>
</div>
<div class="col-sm-6 col-md-6">
<h1>title</h1>
<h3>subtitle</h3>
<p>body</p>
</div>
</div>
<div class="row feature">
<div class="col-sm-6 col-md-6">
<h1>title</h1>
<h3>subtitle</h3>
<p>body</p>
</div>
<div class="col-sm-6 col-md-6">
<img src="url" class="img-responsive" />
</div>
</div>
</div>
非常感谢您的帮助。