相等的柱高Bootstrap

Question

因此，我正试图再次通过学校进行编码，并一直致力于创建一个带有网站的“伪造”公司来测试我的编程技能。 我正在使用引导程序，但似乎无法设法使行中的列具有相等的高度。

到目前为止，我有以下HTML和CSS：

 .dienst-kaart{ padding:15px; min-height:100%; } .dienst { background:white; padding:4%; opacity:0.9; box-shadow: 5px 10px 10px #e1e0e2; } 

 <div class="row"> <div class="col-md-3 dienst-kaart"> <div class="dienst"> <img class="diensten-icon" src="http://flevonline.nl/wp-content/uploads/2018/10/Webdesign-Flevonline.png" alt="Web-design-Icon" width="20%"> <h2>Web design</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ut mauris auctor, volutpat dui sit amet, faucibus leo.</p> </div> </div> <div class="col-md-3 dienst-kaart"> <div class="dienst"> <img class="diensten-icon" src="http://flevonline.nl/wp-content/uploads/2018/10/Grafisch-Design-Flevonline.png" alt="Web-design-Icon" width="20%"> <h2>Grafisch design</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ut mauris auctor, volutpat dui sit amet, faucibus leo.</p> </div> </div> <div class="col-md-3 dienst-kaart"> <div class="dienst"> <img class="diensten-icon" src="http://flevonline.nl/wp-content/uploads/2018/10/Online-Marketing-Flevonline.png" alt="Web-design-Icon" width="20%"> <h2>Online marketing</h2> <p>Praesent tempor nunc placerat feugiat commodo. Aliquam in velit et ipsum iaculis commodo eget in metus. Integer cursus, turpis.</p> </div> </div> <div class="col-md-3 dienst-kaart"> <div class="dienst"> <img class="diensten-icon" src="http://flevonline.nl/wp-content/uploads/2018/10/E-Commerce-Flevonline.png" alt="Web-design-Icon" width="20%"> <h2>E-commerce</h2> <p>Praesent tempor nunc placerat feugiat commodo. Aliquam in velit et ipsum iaculis commodo eget in metus. Integer cursus, turpis.</p> </div> </div> </div> 

任何人都可以使用flexbox技术来帮助我，因为它似乎不适用于我。 先感谢您！

Answer 1

放置display: flex .dienst-kaart规则中的display: flex 。

 .dienst-kaart{ display: flex; padding:15px; min-height:100%; } .dienst { background:white; padding:4%; opacity:0.9; box-shadow: 5px 10px 10px #e1e0e2; } 

 <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet"/> <div class="row"> <div class="col-md-3 dienst-kaart"> <div class="dienst"> <img class="diensten-icon" src="http://flevonline.nl/wp-content/uploads/2018/10/Webdesign-Flevonline.png" alt="Web-design-Icon" width="20%"> <h2>Web design</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ut mauris auctor, volutpat dui sit amet, faucibus leo.</p> </div> </div> <div class="col-md-3 dienst-kaart"> <div class="dienst"> <img class="diensten-icon" src="http://flevonline.nl/wp-content/uploads/2018/10/Grafisch-Design-Flevonline.png" alt="Web-design-Icon" width="20%"> <h2>Grafisch design</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ut mauris auctor, volutpat dui sit amet, faucibus leo.</p> </div> </div> <div class="col-md-3 dienst-kaart"> <div class="dienst"> <img class="diensten-icon" src="http://flevonline.nl/wp-content/uploads/2018/10/Online-Marketing-Flevonline.png" alt="Web-design-Icon" width="20%"> <h2>Online marketing</h2> <p>Praesent tempor nunc placerat feugiat commodo. Aliquam in velit et ipsum iaculis commodo eget in metus. Integer cursus, turpis.</p> </div> </div> <div class="col-md-3 dienst-kaart"> <div class="dienst"> <img class="diensten-icon" src="http://flevonline.nl/wp-content/uploads/2018/10/E-Commerce-Flevonline.png" alt="Web-design-Icon" width="20%"> <h2>E-commerce</h2> <p>Praesent tempor nunc placerat feugiat commodo. Aliquam in velit et ipsum iaculis commodo eget in metus. Integer cursus, turpis.</p> </div> </div> </div>