html - 当第一个卡头有断字而第二个卡头没有时如何对齐 bootstrap-4 卡

Question

我现在正在用 bootstrap 4 为自己构建一个小元素。 但是我偶然发现了一个问题。我将类(class)卡片用于我的画廊，但一张卡片标题设置了“空白”，所以它打断了这个词，而另一张卡片标题不包含“空白”。这只发生在笔记本电脑屏幕上。在手机屏幕等上一切正常，在桌面上也能正常工作。

我曾尝试使用 CSS3 作为媒体查询，或将卡片的底部边距设置为 0，希望将其对齐到行的底部，但不幸的是，到目前为止没有任何帮助。我在 StackOverflow 上查看了一个相关问题，我所能找到的只是人们在卡体内对齐元素时遇到问题，但我希望卡类能够对齐，无论是否断字。 不知何故我无法使用链接来引用我的图片，所以这里是链接:https://imgur.com/sxPTN9n

我的 html 和 css 是什么样子的:

.whiteSpaceNotAllowed {
    white-space: nowrap;
}


.whiteSpaceAllowed {
    white-space: nowrap;
}

@media screen and (max-width: 768px) {
    .whiteSpaceAllowed {
        white-space: normal;
    }
}

<div class="container-fluid">
<div class="row">
    <div class="col-lg-3">
        <div class="card gallerijCard">
            <div class="card-header GallerijCardHeader">
                <center><p>Ontwerp <span class="whiteSpaceAllowed">& interieur</span></p></center>
                <!-- the span class whiteSpaceAllowed = white-space -> wrapped -->
            </div>
            <div class="card-body">
                <!-- not relevent code -->
            </div>
        </div>
    </div> <!--ending col-lg-3 class-->
    <div class="col-lg-3">
        <div class="card gallerijCard">
            <div class="card-header GallerijCardHeader">
                <center><p><span class="whiteSpaceNotAllowed">Renovatie</span></p></center>
                <!-- whiteSpaceNotAllowed class = white-space -> normal -->
            </div>
            <div class="card-body">
                <!-- not relevent code -->
            </div>
        </div>
    </div> <!--ending col-lg-3 class-->
</div> <!-- ending row-->

所以解释一下我想要完成的事情:

“Ontwerp & interieur”这个词在笔记本电脑屏幕上应该会中断，但两张卡片应该并排对齐。

Answer 1

//解决方法很简单，Nicky 你所要做的就是为图库中的所有卡片设置一个最小高度。您在代码的这一部分设置了最小高度，如下所示，您可以更改该值以满足您的需要。

<div class="col-lg-3" style='min-height: 300px'>
    <div class="card gallerijCard">
        <div class="card-header GallerijCardHeader">
            <center><p>Ontwerp <span class="whiteSpaceAllowed">& interieur</span></p></center>
            <!-- the span class whiteSpaceAllowed = white-space -> wrapped -->
        </div>
        <div class="card-body">
            <!-- not relevent code -->
        </div>
    </div>
</div>