Html CSS和BS4-左浮动未按预期工作

我想将9张卡以3乘3的格式对齐，最多。在较小的设备上查看时，它应该缩小，直到它只是9张卡的列表

CSS:

.cardContainer{
    width: calc(54rem + 60px);
    margin: auto;
}

.card{
    width: 18rem;
    margin: 10px;
    float: left;
}

<div class="cardContainer">

@foreach($cijfers as $cijfer)

    <div class="card">
        @if($cijfer['cijfer'] >= 8)
            <img class="card-img-top" src="check.png" alt="Card image cap">
        @else
            <img class="card-img-top" src="cross.png" alt="Card image cap">
        @endif
        <div class="card-body">
            <h5 class="card-title">{{$cijfer['vak']}}: {{$cijfer['cijfer']}}</h5>
        </div>
    </div>

@endforeach

</div>

我正在使用引导程序4，beta 3。没有其他样式发生更改

HTML:

.cardContainer{
    width: calc(54rem + 60px);
    margin: auto;
}

.card{
    width: 18rem;
    margin: 10px;
    float: left;
}

<div class="cardContainer">

@foreach($cijfers as $cijfer)

    <div class="card">
        @if($cijfer['cijfer'] >= 8)
            <img class="card-img-top" src="check.png" alt="Card image cap">
        @else
            <img class="card-img-top" src="cross.png" alt="Card image cap">
        @endif
        <div class="card-body">
            <h5 class="card-title">{{$cijfer['vak']}}: {{$cijfer['cijfer']}}</h5>
        </div>
    </div>

@endforeach

</div>

@foreach（$cijfers as$cijfer）
@如果（$cijfer['cijfer']>=8）
@否则
@恩迪夫
{{$cijfer['vak']}}:{{$cijfer['cijfer']}
@endforeach

结果是：

我把页面缩小了一点，这样你就可以看到整个页面了

为什么会发生这种情况？我如何修复它？

很明显，您的“x”图像比复选标记图像高一点点，所以浮动的x位于第二行的复选标记下，因为在第二个元素的左侧，复选标记下还有一些垂直空间。如果你仔细看，你甚至可以看到

---

确保两种元素类型/图像具有完全相同的高度，这将解决您的问题。

如果要使用浮动构建此布局，所有卡必须具有相同的高度。