Bootstrap卡片页眉与页脚间间隙消除问题

你遇到的间隙是因为Bootstrap的.card组件默认对内部的card-header和card-footer保留了边框与间距样式，即便没有card-body，这些样式也会造成视觉上的空隙。以下是几种可行的解决方法：

方法1：添加空的card-body并清除内边距 #

最简单的方式是在card-header和card-footer之间插入一个空的card-body，并设置内边距为0，填充中间空隙的同时不影响布局：

<div className="d-flex">
  <div
    className="col-md-4"
    style={{ marginLeft: "300px", marginTop: "20px" }}
  >
    <div className="card">
      <div className="card-header bg-primary text-white">
        <div className="row">
          <div className="col">
            <h3 className="display-3">10</h3>
            <h6> Department</h6>
          </div>
          <div className="col">
            <GiBookshelf style={{ height: "100px", width: "100px" }} />
          </div>
        </div>
      </div>
      {/* 添加空card-body并清除内边距 */}
      <div className="card-body p-0"></div>
      <div
        className="card-footer"
        style={{
          backgroundColor: "#2a52a3",
        }}
      >
        <h5 className="text-white text-center">
          More Info <FiArrowRightCircle />
        </h5>
      </div>
    </div>
  </div>
</div>

方法2：自定义CSS消除间距和边框 #

若不想添加多余DOM元素，可通过自定义CSS修改card-header和card-footer的样式：

/* 全局样式或组件内联样式 */
.card-header-no-gap {
  border-bottom: none;
  margin-bottom: 0;
}
.card-footer-no-gap {
  border-top: none;
  margin-top: 0;
}

在代码中应用这些类：

<div className="d-flex">
  <div
    className="col-md-4"
    style={{ marginLeft: "300px", marginTop: "20px" }}
  >
    <div className="card">
      <div className="card-header bg-primary text-white card-header-no-gap">
        <div className="row">
          <div className="col">
            <h3 className="display-3">10</h3>
            <h6> Department</h6>
          </div>
          <div className="col">
            <GiBookshelf style={{ height: "100px", width: "100px" }} />
          </div>
        </div>
      </div>
      <div
        className="card-footer card-footer-no-gap"
        style={{
          backgroundColor: "#2a52a3",
        }}
      >
        <h5 className="text-white text-center">
          More Info <FiArrowRightCircle />
        </h5>
      </div>
    </div>
  </div>
</div>

方法3：内联样式直接覆盖 #

如果仅需调整单个卡片，可直接用内联样式修改：

<div className="d-flex">
  <div
    className="col-md-4"
    style={{ marginLeft: "300px", marginTop: "20px" }}
  >
    <div className="card">
      <div 
        className="card-header bg-primary text-white"
        style={{ borderBottom: "none" }}
      >
        <div className="row">
          <div className="col">
            <h3 className="display-3">10</h3>
            <h6> Department</h6>
          </div>
          <div className="col">
            <GiBookshelf style={{ height: "100px", width: "100px" }} />
          </div>
        </div>
      </div>
      <div
        className="card-footer"
        style={{
          backgroundColor: "#2a52a3",
          borderTop: "none",
          marginTop: "0"
        }}
      >
        <h5 className="text-white text-center">
          More Info <FiArrowRightCircle />
        </h5>
      </div>
    </div>
  </div>
</div>

以上三种方法均可有效消除card-header与card-footer之间的间隙，可根据需求选择合适的方案。

内容的提问来源于stack exchange，提问作者R.K