我在Bootstrap 4中有一个简单的3列内容部分。整个部分的背景颜色为浅灰色。因此，要分离列，我必须嵌套它们。您可以在这里看到它：Code Pen Example
<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’s more interesting is that 58% of all listening goes to just one station, the
listener’s favorite.</p>
<p><a href="#">Read More ></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’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 ></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’s part of a
phenomenon called “holiday creep,” a new podcast from Nielsen dives into this trend
and holiday retail 2017.</p>
<p><a href="#">Read More ></a></p>
</div>
</div>
</div>
</div>
</div>
您可以看到中间列比其他列短。如何使嵌套列的高度相等？我尝试在样式表中放置一个明确的高度，但这没有响应。
答案 0 :(得分：0)
我做了一些不同的事情，但这是你想要的结果
<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’s part of a phenomenon called “holiday creep,” a new podcast from Nielsen dives into this trend and holiday retail 2017.</p>
<p><a href="#">Read More ></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 ></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’s part of a phenomenon called “holiday creep,” a new podcast from Nielsen dives into this trend and holiday retail 2017.</p>
<p><a href="#">Read More ></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;
}