Bootstrap 4 Card Flex Width在Firefox上无法正常工作

Question

我在尝试使用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上的卡片图片：

您可以看到两种浏览器之间的区别。是个错误吗？ 很高兴能帮到我。谢谢大家

Answer 1

问题是flex元素上的padding，这是您30px .card-header身高的额外负担。

您应将.card-header的顶部和底部填充设置为0；

有关更多详细信息，请参见此SO问题： How to get flexbox to include padding in calculations?