Bootstrap5中如何让jumbotron对齐body顶部且保留原有尺寸

问题现象 #

当前开发效果如下：

Bootstrap v5的jumbotron当前为居中对齐，需要对齐到body最顶部，删除body样式中的align-items:center属性后jumbotron可以顶对齐，但高度会异常拉伸至几乎占满整个body。

问题原因 #

1. 为了实现flex垂直居中，你已经给html、body设置了height: 100%让body占满视口高度，同时给body设置了display: flex
2. flex容器的align-items属性默认值为stretch，删除align-items: center后属性恢复默认，会让flex子项（jumbotron）的垂直高度自动拉伸到和容器高度一致，因此出现高度异常的问题

解决方案 #

以下两种方案都可以实现jumbotron顶对齐且保留原有尺寸，按需选择即可：

方案1：修改flex容器全局对齐规则

将body的align-items属性值从center改为flex-start，如果需要完全贴合body最顶部，同步将padding-top改为0，修改后代码如下：

body {
  display: flex; 
  align-items: flex-start;
  padding-top: 0; /* 不需要完全贴顶可保留原40px配置 */
  padding-bottom: 40px;
  background-color: #f5f5f5;
}

align-items: flex-start会让所有子项以自身原有高度顶对齐，不会触发拉伸逻辑。

方案2：仅修改jumbotron单独对齐规则

如果body的flex居中配置需要作用于其他子元素，不想修改全局配置，只需要给jumbotron添加align-self: flex-start属性即可，修改后代码如下：

.jumbotron {
  padding: 2rem 1rem;
  margin: 0 auto;
  width: 100%;
  background-color: #e9ecef;
  border-radius: .3rem;
  align-self: flex-start;
}

需要完全贴顶同样修改body的padding-top为0即可。

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