引导程序中卡页眉和卡页脚之间的间隙

Question

我正在尝试创建引导卡。我已经创建了卡页眉和卡页脚（但没有卡体），但我观察到页眉和页脚之间存在间隙。可能是因为没有卡体的缘故。 但我想消除这个差距。

这是我的名片：

这是我的代码

       <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>
              <div
                className="card-footer"
                style={{
                  backgroundColor: "#2a52a3",
                  marginTop: "0",
                }}
              >
                <h5 className="text-white text-center">
                  More Info <FiArrowRightCircle />
                </h5>
              </div>
            </div>
          </div>`

Answer 1

尚不完全清楚错误是什么，因为您发布的代码似乎没有显示您所描述的差距。但是，您面临的问题可能是由于 .card-header 上的默认 border-bottom 和 .card-footer 上的 border-top 造成的。

您可以尝试通过添加以下 CSS 来覆盖这些边框：

.card-header {
  border-bottom: 0 !important; 

.card-footer {
  border-top: 0 !important; 
}

这应该消除页眉和页脚之间的任何间隙。如果您仍然看到差距，可能是由于项目中的特定样式造成的，例如外部 CSS 或 Bootstrap 覆盖。