带有Bootstrap 3和flexbox的等高柱
obo*_*oer 2 html css flexbox twitter-bootstrap-3 display
我正在使用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 class="row row-flex row-flex-wrap">
<div class="col-xs-4">
<div class="well">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,
totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae
dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit.
</div>
</div>
<div class="col-xs-4">
<img class="img-responsive" src="http://placehold.it/200x100">
<div class="well">
Duis pharetra varius quam sit amet vulputate.
</div>
</div>
<div class="col-xs-4">
<div class="well">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate.
Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis
dolor, in sagittis nisi.
</div>
</div>
</div><!--/row-->
</div><!--/container-->
<hr>
</body>我认为你只需要继续将flexbox的应用扩展到孩子们身上.
但请注意,图像可能会对本机灵活儿童造成严重影响.将图像包装在div中可以解决问题.
html,
body {
height: 100%;
}
.row-flex {
display: flex; /* columns are now equal height */
}
.col-md-3 {
background: pink;
display: flex;
flex-direction: column;
}
.panel,
.well { /* make panels & wells expand to full height */
flex: 1;
display: flex;
flex-direction: column;
}
.panel-footer { /* push footer to bottom */
margin-top: auto;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row row-flex">
<div class="col-md-3">
<div class="panel panel-default flex-col">
<div class="panel-heading">Title flex-col</div>
<div class="panel-body flex-grow">Content here -- div with .flex-grow</div>
<div class="panel-footer">Footer</div>
</div>
</div>
<div class="col-md-3">
<div>
<img class="img-responsive" src="http://placehold.it/400x100">
</div>
<div class="well">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas
sit aspernatur aut odit aut fugit.
</div>
</div>
<div class="col-md-3">
<div class="well">
Duis pharetra varius quam sit amet vulputate.
</div>
</div>
<div class="col-md-3">
<div class="well">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis dolor, in sagittis nisi.
</div>
</div>
</div>
<!--/row-->
</div>
<!--/container-->