在嵌套列中，列高度相等引导 4

Question

我在 Bootstrap 4 中有一个简单的 3 列内容部分。整个部分的背景颜色为浅灰色。因此，为了分隔列，我必须嵌套它们。您可以在此处看到它： 代码笔示例

<div class="related-content">
<div class="container">
<div class="row">
<div class="col-md-12" pardot-region="related-content-title">
<h4 class="black">Related Content</h4>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-4">
<img class="feature"
src="https://go.nielsen.com/l/271912/2018-10-08/chwkd/271912/63689/article_photo.png"
alt="Asian family" pardot-region="article-image" pardot-region-type="image"/>
<div class="col-md-12 related-pod" pardot-region="related-article">
<h4><a href="#">Fan Favorite: Radio listeners spend 58% of their tune-in time with their favorite
station</a></h4>
<p>Americans spend 87% of their AM/FM radio listening tuning into their three favorite stations.
What&rsquo;s more interesting is that 58% of all listening goes to just one station, the
listener&rsquo;s favorite.</p>
<p><a href="#">Read More &gt;</a></p>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4">
<img class="feature"
src="https://go.nielsen.com/l/271912/2018-10-08/chwkn/271912/63699/report_photo.png" alt="Reports"
pardot-region="report-image" pardot-region-type="image"/>
<div class="col-md-12 related-pod" pardot-region="related-report">
<h4><a href="#">2016 Social Media Report</a></h4>
<p>There&rsquo;s no denying the massive impact of social media, but the way people connect&mdash;with
content, brands and each other&mdash;is evolving.</p>
<p><a href="#">Read More &gt;</a></p>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4">
<img class="feature"
src="https://go.nielsen.com/l/271912/2018-10-08/chwkl/271912/63695/podcast_photo.png"
alt="Database Podcast" pardot-region="media-image" pardot-region-type="image"/>
<div class="col-md-12 related-pod" pardot-region="related-media">
<h4><a href="#">The Database, Episode 1: Holiday creep is extending the holiday shopping season</a>
</h4>
<p>Why are consumers starting their holiday shopping sooner? It turns out it&rsquo;s part of a
phenomenon called &#8220;holiday creep,&#8221; a new podcast from Nielsen dives into this trend
and holiday retail 2017.</p>
<p><a href="#">Read More &gt;</a></p>
</div>
</div>
</div>
</div>
</div>

您可以看到中间列比其他列短。如何使嵌套列的高度相等？我尝试在样式表中放置显式高度，但这没有响应。

Answer 1

我做了一些不同的事情，但这是你想要的结果

<div class="related-content">
<div class="container">
<div class="row">
<div class="col-md-12" pardot-region="related-content-title">
<h4 class="black">Related Content</h4>
</div>
<div class="row">
<div class="col-12 col-md-4 dienst-kaart">
<div class="dienst">
<div class="row no-gutter">
<div class="col-12">
<img class="diensten-icon img-fluid" src="https://go.nielsen.com/l/271912/2018-10-08/chwkl/271912/63695/podcast_photo.png" alt="Web-design-Icon">
</div>
<div class="col-12">
<h2>The Database, Episode 1: Holiday creep is extending the holiday shopping season</h2>
<p>Why are consumers starting their holiday shopping sooner? It turns out it&rsquo;s part of a phenomenon called &#8220;holiday creep,&#8221; a new podcast from Nielsen dives into this trend and holiday retail 2017.</p>
<p><a href="#">Read More &gt;</a></p>
</div>
</div>
</div>
</div>
<div class="col-12 col-md-4 dienst-kaart">
<div class="dienst">
<div class="row">
<div class="col-12">
<img class="diensten-icon img-fluid" src="https://go.nielsen.com/l/271912/2018-10-08/chwkl/271912/63695/podcast_photo.png" alt="Web-design-Icon">
</div>
<div class="col-12">
<h2>The Database, Episode 1: Holiday creep is extending the holiday shopping season</h2>
<p>There’s no denying the massive impact of social media, but the way people connect—with content, brands and each other—is evolving..</p>
<p><a href="#">Read More &gt;</a></p>
</div>
</div>
</div>
</div>
<div class="col-12 col-md-4 dienst-kaart">
<div class="dienst">
<div class="row no-gutter">
<div class="col-12">
<img class="diensten-icon img-fluid" src="https://go.nielsen.com/l/271912/2018-10-08/chwkl/271912/63695/podcast_photo.png" alt="Web-design-Icon">
</div>
<div class="col-12">
<h2>The Database, Episode 1: Holiday creep is extending the holiday shopping season</h2>
<p>Why are consumers starting their holiday shopping sooner? It turns out it&rsquo;s part of a phenomenon called &#8220;holiday creep,&#8221; a new podcast from Nielsen dives into this trend and holiday retail 2017.</p>
<p><a href="#">Read More &gt;</a></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

.CSS

.related-content {
padding-top: 1.25em;
padding-bottom: 9em;
background-color: #f7f8f9;
}
.related-content h4 {
padding-top: 1em;
padding-bottom: .5em;
color: #333;
}
.dienst-kaart{
display: flex;
padding:15px;
min-height:100%;
background: #eee;
}
.dienst {
background:white;
padding:4%;
opacity:0.9;
}

例