我肯定在这里缺少明显的东西,但是我是Bootstrap的初学者,我不知道它可能是什么。我正在尝试获取这张图片和相邻的段落,以垂直堆叠在xs屏幕上。不管我做什么,它们只会并排排列,将图片推到屏幕边缘。这是正在发生的事情以及我的代码的图片。

html - Bootstrap-列不会在xs上垂直堆叠-LMLPHP

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

10-05 20:39
查看更多