如何分隔Card组件的头部与主体边框，实现指定显示效果

实现Card头部与主体分隔效果的修改方案 #

你可以根据自己的需求选择以下两种方案之一：

方案1：无需修改现有HTML，直接新增CSS样式（推荐）

利用负margin抵消外层容器的左右内边距，让分隔线撑满卡片宽度，直接在你的CSS文件中新增如下代码即可：

.card-hdr {
  /* 下边框样式，色值可根据实际视觉效果调整 */
  border-bottom: 1px solid #666666;
  /* 负margin抵消外层p-4的左右1.5rem内边距，让分隔线左右贴边 */
  margin: 0 -1.5rem 1rem;
  /* 补充头部的左右内边距，保证原有内容位置不变 */
  padding: 0 1.5rem 1rem;
}

方案2：调整HTML结构，代码更易维护

如果可以修改现有HTML，建议将全局内边距拆分到头部和内容模块，结构更清晰：

修改后HTML代码

<div class="card-bg w-100 d-flex flex-column">
    <div class="d-flex flex-column h-100">
        <!-- 头部单独设置内边距 -->
        <div class="p-4 pb-3 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="px-4 pt-3 text-center card-bd justify-content-center">
            ...
        </div>
        <form class="px-4 pb-4 form-inline mt-4 justify-content-around">
            ...
        </form>
    </div>
</div>

对应新增CSS代码

.card-hdr {
  border-bottom: 1px solid #666666;
}

两种方案都可以实现你需要的分隔线效果，边框色值#666666可以根据实际设计要求调整为更匹配的灰度。

内容的提问来源于stack exchange，提问作者Agochar Bhatia