我有一行和2列在那里,我试图使相同的高度,因为有边界线顶部和底部,应该是对齐,也框阴影。我已经尝试了吨的建议解决方案,这里推荐的排除涉及javascript,How can I make Bootstrap columns all the same height?和没有工作。例如,添加此CSS到行类没有工作:
.equal {
display: flex;
display: -webkit-flex;
flex-wrap: wrap;
}
我的CSS:
第一次
我有一行和2列在那里,我试图使相同的高度,因为有边界线顶部和底部,应该是对齐,也框阴影。我已经尝试了吨的建议解决方案,这里推荐的排除涉及javascript,How can I make Bootstrap columns all the same height?和没有工作。例如,添加此CSS到行类没有工作:
.equal {
display: flex;
display: -webkit-flex;
flex-wrap: wrap;
}
我的CSS:
第一次
1条答案
按热度按时间w1jd8yoj1#
你必须非常具体地使用你的CSS。
我添加了一个边界,以您的列,使您有一个视觉的列高度。
BS3的设计不是为了与Flex一起工作,但这并不意味着它不能。
更新:
创建了2个CSS类
.d-flex
和.d-flex-item
在CSS flex模型
display:flex
中,项使其子项 * flex项 * 默认情况下会拉伸以适应其容器的高度。这只会深入一层,因此要使其适用于您的布局:
div.row
是弹性容器div.col-md-5
:div.row
div.info
的flex容器div.info
是其父项的弹性域项:div.col-md-5
div.col-md-7
是其父项的弹性域项:div.row
所有这一切都是为了允许flex项伸展到其父容器。在任何flex项上设置CSS
height
将覆盖该项的默认stretch
。第一个