Question

我现在正在使用引导程序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”一词应会中断，但两张卡应对齐。

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>

当第一个卡头有分行符而第二个卡头没有分行符时，如何对齐bootstrap-4卡

1 个答案: