我有一张卡片，看起来像

我希望它看起来像

这是我的HTML

<div class="card-bg w-100 d-flex flex-column">
    <div class="p-4 d-flex flex-column h-100">
        <div class="d-flex card-hdr align-items-center justify-content-between" style="color: #fff;">
            <h4 class="m-0 h5 font-weight-bold">Welcome</h4>
            <div class="py-1 px-2 bg-grey rounded-circle"><i class="fas fa-suitcase"></i></div>
        </div>
        <div class="text-center card-bd justify-content-center mt-4">
            ...
        </div>

        <form class="form-inline mt-4 justify-content-around">
            ...
        </form>
    </div>
</div>

这是我的CSS

<div class="card-bg w-100 d-flex flex-column">
    <div class="p-4 d-flex flex-column h-100">
        <div class="d-flex card-hdr align-items-center justify-content-between" style="color: #fff;">
            <h4 class="m-0 h5 font-weight-bold">Welcome</h4>
            <div class="py-1 px-2 bg-grey rounded-circle"><i class="fas fa-suitcase"></i></div>
        </div>
        <div class="text-center card-bd justify-content-center mt-4">
            ...
        </div>

        <form class="form-inline mt-4 justify-content-around">
            ...
        </form>
    </div>
</div>

我还有其他几种与这个问题无关的风格。

---

顺晟科技：

我想这就是你想要的。您只需单独设置两个容器的样式。

根据官方文档的建议，您可以使用类和在标题上添加边距。如下所示:

HTML、CSS保持在最低限度，以便您可以更容易地调试它。我刚刚使用了bootstrap中的类。

您不必添加，只需将自定义样式保留在引导样式之后即可。 在这里，情况正好相反。

看一下这个演示:

必须为标题和内容分别设置样式。

为此，我为所有内容创建了一个额外的容器，并对其单独应用了样式。

根据需要使用样式，这里使用的样式仅用于演示