我肯定在这里缺少明显的东西,但是我是Bootstrap的初学者,我不知道它可能是什么。我正在尝试获取这张图片和相邻的段落,以垂直堆叠在xs屏幕上。不管我做什么,它们只会并排排列,将图片推到屏幕边缘。这是正在发生的事情以及我的代码的图片。
<div class="row para-text vertical-align">
<div class="col-xs-12 col-md-8 col-md-push-4">
<p>text....</p>
</div>
<div class="clearfix visible-sm-block"></div>
<div class="col-xs-12 col-md-4 col-md-pull-8">
<img class="img-full" src="img/artesia1.jpg" alt="">
</div>
</div>
这是我添加的CSS样式,以防引起问题
.para-text {
padding:15px;
}
.vertical-align {
display: flex;
align-items: center;
}
最佳答案
我建议不要使用您发布的CSS类。当我用您的html代码做一个简单的示例但没有CSS时,它似乎工作正常:
请参阅:http://www.bootply.com/GCu0vDtk6K
注意:我还删除了您的:
<div class="clearfix visible-sm-block"></div>