小编obo*_*oer的帖子
带有Bootstrap 3和flexbox的等高柱
我正在使用Bootstrap 3(遗憾的是无法将其更改为Bootstrap 4)并且我需要实现与图片中相同的高度列效果:
我已经成功通过使用位置绝对和@media屏幕来获得正确的图像大小和填充(黄色区域),但我相信有更好的方法来解决它.
我在这里找到了很好的工作代码,但是在顶部添加图片会破坏设计 - 图片会在附加列中添加并拉伸所有内容(此处).添加显示:块让我回到原始问题 - 不同高度的列.
我确信有一些干净利落的方式让它起作用!
编辑:到目前为止,我有一个主行(下图中的绿框),其中有3列.如果我改为3行(红色框架)并仅对中间内容应用相同高度怎么办？它可以在大屏幕上很好地工作,但是在小屏幕上,当列占据整个屏幕宽度时,最终会有3张图片一张在另一张下,三张描述部分在另一张下面,三个按钮在另一张下面 - 绝对不是我想要的!在这种情况下有没有办法重新排列列的显示,所以我会得到3x图片描述按钮？
edit2:添加了代码段
html,body {
height:100%;
}
.row-flex, .row-flex > div[class*='col-'] {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex:1 1 auto;
}
.row-flex-wrap {
-webkit-flex-flow: row wrap;
align-content: flex-start;
flex:0;
}
.container-flex > div[class*='col-'] div,.row-flex > div[class*='col-'] div {
width:100%;
}<header>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</header>
<body>
<div class="container"><h3>.row-flex (make columns equal heights in each row)</h3></div>
<div class="container">
<div …2
推荐指数
推荐指数
1
解决办法
解决办法
2万
查看次数
查看次数