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

【问题标题】：how to align bootstrap-4 card when the first card-header has word break and the second card-header not当第一个卡头有断字而第二个卡头没有时如何对齐 bootstrap-4 卡
【发布时间】：2019-09-13 04:09:50
【问题描述】：

我现在正在使用 bootstrap 4 为自己构建一个小项目。但是我偶然发现了一个问题。我为我的画廊使用班级卡片，但一个卡片标题有一个“空白”集，所以它破坏了这个词，而另一个卡片标题不包含“空白”。这只发生在笔记本电脑屏幕上。在手机屏幕等上一切正常，在桌面上也可以正常工作。

我尝试过使用 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”一词应该在笔记本电脑屏幕上中断，但两张卡应该彼此相邻对齐。

【问题讨论】：

您可以设置 .card-header div 的最小高度

标签： html css bootstrap-4

【解决方案1】：

// 解决方案很简单，尼基，你所要做的就是为画廊中的所有卡片设置一个最小高度。您在代码的此部分设置 min-height 如下所示，您可以更改该值以满足您的需要。

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

【讨论】：