如何阻止Bootstrap 5导航栏因Alert显隐改变高度

问题原因 #

Bootstrap的.alert组件默认自带内边距（padding）和外边距（margin），这些样式会撑开导航栏高度；当Alert关闭后，原容器失去Alert的高度支撑，再加上导航栏未设置固定高度，就会出现高度波动的问题。

解决方案 #

方法1：给导航栏设置固定最小高度 #

通过给导航栏设置min-height，强制保持高度一致，同时用align-items: center确保内部内容垂直居中：

.navbar-brand img {
    height: 50px;
    width: 50px;
}

.alert svg {
    height: 20px;
    width: 20px;
}

/* 新增：固定导航栏最小高度 */
.navbar {
    min-height: 76px;
    align-items: center;
}

方法2：给Alert父容器设置最小高度 #

针对Alert所在的#wallet_address容器设置最小高度，匹配Alert显示时的高度，避免容器高度塌陷：

.navbar-brand img {
    height: 50px;
    width: 50px;
}

.alert svg {
    height: 20px;
    width: 20px;
}

/* 新增：给Alert父容器设置最小高度并垂直居中内容 */
#wallet_address {
    min-height: 48px;
    display: flex;
    align-items: center;
}

方法3：调整Alert内边距匹配文本高度 #

如果希望Alert显示时高度和文本状态一致，可修改Alert的内边距，减少额外高度：

.navbar-brand img {
    height: 50px;
    width: 50px;
}

.alert svg {
    height: 20px;
    width: 20px;
}

/* 新增：调整Alert内边距，匹配文本高度 */
.alert {
    padding: 0.5rem 1rem;
    margin: 0;
}

内容的提问来源于stack exchange，提问作者ya idk what i'm doing