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

时间:2018-12-13 08:48:20

标签: html css firefox flexbox bootstrap-4

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

enter image description here

这是Opera上的卡片图片:

enter image description here

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

1 个答案:

答案 0 :(得分:1)

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

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

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