我的理解是,新的Boostrap(v4)使用flex在盒子上显示元素,并且对齐时更加灵活。在我的页面中,我有三个具有相同高度的框,但是白色的内部元素也必须具有相同的高度。
我该如何实现?将设置为.tile
会height:100%
导致框太长。
编辑:我想弄清楚这不是使标记为红色的列的高度相等,这已经使用标准的Bootstrap类实现了。它是白色的盒子,我需要全高。
.col-md-4 {
border: 1px solid red;
}
.tile {
background: #fff;
}
body {
background: grey
}
.img-fluid {
width: 100%;
}
.padding {
padding: 0 10px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row row-eq-height three-sections">
<div class="col-md-4 align-self-stretch tile-outer">
<div class="tile">
<a href="#" target="_blank"><img src="https://via.placeholder.com/300x300" alt="" class="img-fluid" /></a>
<div class="padding">
<h3>Text block 1</h3>
<p>Lorem ipsum dolor sit amet, minim molestie argumentum est at, pri legere torquatos instructior ex. Vis id odio atomorum oportere, quem modo fabellas sit at, dicat semper est ne. Apeirian detraxit pri eu. No solum accusam has. Ius ne harum mundi
clita, eu pro tation audiam.</p>
</div>
</div>
</div>
<div class="col-md-4 align-self-stretch tile-outer">
<div class="tile">
<a href="#" target="_blank"><img src="https://via.placeholder.com/300x300" alt="" class="img-fluid" /></a>
<div class="padding">
<h3>Some random text here</h3>
<p>Lorem ipsum dolor sit amet, minim molestie argumentum est at, pri legere torquatos instructior ex. </p>
</div>
</div>
</div>
<div class="col-md-4 align-self-stretch tile-outer">
<div class="tile">
<a href="#" target="_blank"><img src="https://via.placeholder.com/300x300" alt="" class="img-fluid" /></a>
<div class="padding">
<h3>Another random line</h3>
<p>Lorem ipsum dolor sit amet, minim molestie argumentum est at, pri legere torquatos instructior ex. Vis id odio atomorum oportere, quem modo fabellas sit at, dicat semper est ne. Apeirian detraxit pri eu. No solum accusam has.</p>
</div>
</div>
</div>
</div>
</div>
只需添加display: flex
到col-md-4
容器中。这将自动应用于align-self: stretch
子元素。修改后的演示
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句