我在尝试使用Bootstrap 4和flex制作网页时遇到问题。我正在使用一定宽度的Bootstrap卡。我看到这在Google Chrome和Opera中能正常工作,但在Firefox中似乎不起作用。 这是我的代码:
<div class="row auxAltura2">
<div class="col">
<div class="card">
<div class="card-header colorPlataforma">
Tags
</div>
<div id="moduloTags" class="card-body">
...
</div>
</div>
</div>
</div>
现在这是我的CSS:
.auxAltura2{height:250px}
.card-header{
display: flex;
flex: 1 0 30px;
align-items: center;
font-size:17px;
}
Firefox上的图像卡:
这是Opera上的卡片图片:
您可以看到两种浏览器之间的区别。是个错误吗? 很高兴能帮到我。谢谢大家
答案 0 :(得分:1)
问题是flex元素上的padding
,这是您30px
.card-header
身高的额外负担。
您应将.card-header
的顶部和底部填充设置为0;
有关更多详细信息,请参见此SO问题: How to get flexbox to include padding in calculations?