文本在某些反应卡上的位置不正确

Question

我有一个提取视频的应用程序，它为提取的每个视频创建一个卡片，卡片上还包含视频标题，视频创建者，视频链接，视频下载链接，观看次数和上传日期。

我正在毫不费力地获取所有这些东西，并且它们大部分都显示了我想要的方式。

奇怪的是，对于某些卡，下载和观看视频的文本位置错误，并且比预期的要高。

在这里您可以看到我遇到的问题，基本上第一张和第三张卡都正确显示，但是由于某些原因，您可以看到中间卡的下载和查看文字更高。

以下是我的卡片的CSS

.card {
    background-color: $secondaryColor;
    border: 3px solid #fff;
    outline: black solid thin;
}

.authorInfo {
    display: flex;
}

.card-body {
    display: flex;
    justify-content: space-between;
    margin-bottom: -10px;
}

.card-footer {
    display: flex;
    justify-content: space-between;
}

.watchComp {
    display: flex;
}

.dlComp {
    display: flex;
}

.card-deck {
    padding-bottom: 1.5rem;
}

dl comp由图标和链接组成，与watch comp相同。当发生这种情况但没有任何效果时，我尝试更改了inspect元素中的定位样式。

关于什么原因的任何想法？如果重要的话，我正在使用的卡来自react-bootstrap。

Answer 1

第二张屏幕截图中的

Watch Clip和Download Clip紧随其后，因为标题只有一行toxic。您可以使用<div>标签包裹该行，也可以使用align-items: center样式。