Question

我的理解是，新的Boostrap（v4）使用flex在盒子上显示元素，并且对齐时更加灵活。在我的页面中，我有三个具有相同高度的框，但是白色的内部元素也必须具有相同的高度。

我该如何实现？将.tile设置为height:100%;会使框太长。

编辑：我想弄清楚这不是使标记为红色的列的高度相等，这已经使用标准的Bootstrap类实现了。白色的盒子我需要全高。 这与这里已经存在的所有欺诈问题无关

HTML

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

CSS

.col-md-4 {
  border: 1px solid red;
}
.tile {
 background: #fff;
}
body {
  background: grey
}
.img-fluid {
  width: 100%;
}
.padding {
  padding: 0 10px;
}

Answer 1

只需将display: flex添加到col-md-4容器中即可。这将自动将align-self: stretch应用于子元素。 revised demo

Answer 2

这也可以解决

.tile {
 background: #fff;
 height: 100%:
}

如何在Bootstrap flex子元素中具有相等的高度？

2 个答案: