引导卡到底部的最小高度

在移动设备上，引导卡（Bootstrap Card）是常见的 UI 组件之一，它通常用于展示信息、提供操作入口等功能。但是，在一些情况下，我们希望引导卡填充整个屏幕，同时保证底部有一定的间隔，以便于用户操作。本文将介绍如何在引导卡中设置最小高度，以保证卡片底部有一定的间隔，同时又可以填充整个屏幕。

方法一：使用“vh”

可以使用“vh”单位来设置最小高度。vh 单位表示视口高度的百分比，一个视口高度等于 100vh。

.card {
  min-height: calc(100vh - 100px);
}

上面的代码中，“.card”是引导卡的 CSS 类名。这里使用 calc() 函数可以让最小高度减去 100px 的间隔高度。

方法二：使用flex布局

另一种实现方法是使用 flex 布局。将父级容器设置为 flex 布局，并使用 align-items 属性来垂直居中。同时，使用 justify-content: center; 来实现水平居中。

.card-container {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 100px);
}

上面的代码中，“.card-container”是浮动容器的 CSS 类名。这里使用 calc() 函数可以让最小高度减去 100px 的间隔高度。

总结

本文介绍了两种实现方法，可以让引导卡保持一定最小高度，并且在移动设备上自适应。我们可以根据具体场景选择不同的实现方案。