Boostrap与网格混合，使其与.col中的行高相等
Boostrap与网格混合，使其与.col中的行高相等
提问于 2019-04-13 18:49:10
我想设置我的代码在.col中自动计算相等的高度，因为例如在.col中，我有<h2>和<p>，它们可能有不同的行数，所以这个元素的高度对于每个.col都是不同的，我希望.col中的所有行都有相同的高度。
我尝试使用flexbox实用程序，但没有找到解决方案，所以我想知道grid是否能帮助我得到我想要的东西，但我不知道是否display: grid继承了flexbox元素的高度？
下面是我的代码：
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="header-bottom-box">
<h2>Projektowanie <b>stron</b></h2>
<div class="img-container">
<img src="http://irson.linuxpl.eu/images/projektowanie-stron.jpg" class="img-fluid" alt="Projektowanie stron">
</div>
<p>Projektowanie oraz tworzenie serwisów internetowych.</p>
<div class="text-right">
<a href="/oferta.html">więcej</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="header-bottom-box">
<h2>Pozycjonowanie <b>stron</b></h2>
<div class="img-container">
<img src="http://irson.linuxpl.eu/images/pozycjonowanie-stron.jpg" class="img-fluid" alt="Pozycjonowanie stron">
</div>
<p>Zwiększ pozycję swojej strony www w wynikach wyszukiwania.</p>
<div class="text-right">
<a href="/oferta.html">więcej</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="header-bottom-box">
<h2>Outsourcing <b>IT</b></h2>
<div class="img-container">
<img src="http://irson.linuxpl.eu/images/outsourcing-it.jpg" class="img-fluid" alt="Outsourcing IT">
</div>
<p>Outsourcing informatyczny Profesjonalna opieka informatyczna dla firm.</p>
<div class="text-right">
<a href="/oferta.html">więcej</a>
</div>
</div>
</div>
</div>
</div>https://codepen.io/anon/pen/jRweow
我考虑使用display: grid到.header-bottom-box和等高的内部元素。
编辑我尝试使用GIRD：
它就像我想要的那样工作，但我不知道为什么我得到了这个空白，如何删除它？
回答 2
Stack Overflow用户
发布于 2019-04-13 19:40:21
这是很正常的，先生，这一切都是因为上一次的原因。文本少于第一个和第二个。
Stack Overflow用户
发布于 2019-04-15 02:17:32
使用display:flex；也可以解决你的问题，你将在每个.col-md-4中得到相同的高度
.col-md-4{
align-items: center;
display: flex;
justify-content: center;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55664629
复制相关文章
相似问题