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

原文 标签 html css twitter-bootstrap

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

Picture of improper stacking

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

关于html - Bootstrap-列不会在xs上垂直堆叠,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32728491/

相关文章:

javascript - 用Javascript实现水平子菜单

javascript - 如何获取HTML5 textarea转换为换行符的字符串表示形式?

html - 将 rvest::html_nodes() 与来自 SelectorGadget 或 Chrome 开发者工具的 CSS 标记一起使用总是返回空列表

html - 如何在 Bootstrap 的单个输入组中进行多个分段输入

javascript - 如何使用jQuery获取数据以 Bootstrap 3模态形式

javascript - 一种读取或更改 CSS 动画关键帧的方法

javascript - 在一个div内引用一个div,该div与另一个内的div具有相同的ID

css - CSS模仿简单的条形图

javascript - 使用 Jquery 的响应式设计 Bootstrap 中按钮的不同文本大小(例如姓氏、名字/名字)

html - Bootstrap 和 Pandoc 的代码块格式问题