CSS和BS4 -浮动不按预期工作

Question

我想以3乘3的格式对齐9张卡，最多。当在一个较小的设备上观看时，它应该收缩，直到它仅仅是一个9张卡片的列表。

CSS:

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

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

我使用的引导4，beta 3。没有其他风格已经改变。

HTML:

<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>

其结果是：

​

​

我把这页放大了一点，这样你就可以看到整页了。

为什么会发生这种事，我该怎么解决呢？

Answer 1

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

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