yiqiu/BlackFruit-UI
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修复导航栏高度问题：在 common.css 中为所有移动端断点添加 align-items/height 规则

Browse Source 
核心问题：
- common.css 的 767px/575px 媒体查询中只设置了 nav-header 高度，但没有设置 nav-right 的 flex 拉伸属性
- 导致 nav-right 虽然有 height: 100% 但被 align-items: center（base rule）所影响
- 注册按钮（no-login）作为 nav-desktop-link 类被全局 display: none !important 隐藏

修复内容：
767px 断点:
- 添加 .nav-header { display: flex !important; align-items: stretch !important; }
- 添加 .nav-header .nav-left { display: flex !important; align-items: stretch !important; }
- 添加 .nav-header .nav-right { display: flex !important; align-items: stretch !important; height: 100% !important; }
- 添加 .nav-right { display: flex !important; align-items: stretch !important; height: 100% !important; }
- 添加 .no-login.nav-desktop-link { display: flex !important; height: 100% !important; align-items: stretch !important; }

575px 断点:
- 为所有导航栏元素添加相同的 flex 和高度规则

基础规则:
- 为 .nav-right 添加 flex-shrink: 0 防止 flex 容器缩小

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
yiqiu
2025-12-17 17:35:54 +08:00
parent 075046b9d6
commit ccf44c7fda
1 changed files with 55 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
common/common.css
View File

@@ -122,6 +122,7 @@
align-items: stretch; align-items: stretch;
font-size: 14px; font-size: 14px;
height: 100%; height: 100%;
flex-shrink: 0;
} }
.nav-right .control { .nav-right .control {
@@ -1292,6 +1293,26 @@
.nav-header { .nav-header {
height: 50px !important; height: 50px !important;
padding: 0 12px; padding: 0 12px;
display: flex !important;
align-items: stretch !important;
}
.nav-header .nav-left {
display: flex !important;
align-items: stretch !important;
flex: 1;
}
.nav-header .nav-right {
display: flex !important;
align-items: stretch !important;
height: 100% !important;
}
.nav-right {
display: flex !important;
align-items: stretch !important;
height: 100% !important;
} }
.nav-header .nav-left .nav-icon img { .nav-header .nav-left .nav-icon img {
@@ -1315,6 +1336,13 @@
display: none !important; display: none !important;
} }
/* 注册按钮容器强制显示 */
.no-login.nav-desktop-link {
display: flex !important;
height: 100% !important;
align-items: stretch !important;
}
.nav-menu .nav-item { .nav-menu .nav-item {
padding: 0 8px; padding: 0 8px;
font-size: 13px; font-size: 13px;
@@ -1483,6 +1511,26 @@
.nav-header { .nav-header {
height: 48px !important; height: 48px !important;
padding: 0 10px; padding: 0 10px;
display: flex !important;
align-items: stretch !important;
}
.nav-header .nav-left {
display: flex !important;
align-items: stretch !important;
flex: 1;
}
.nav-header .nav-right {
display: flex !important;
align-items: stretch !important;
height: 100% !important;
}
.nav-right {
display: flex !important;
align-items: stretch !important;
height: 100% !important;
} }
.nav-header .nav-left .nav-icon img { .nav-header .nav-left .nav-icon img {
@@ -1491,6 +1539,13 @@
margin-right: 8px; margin-right: 8px;
} }
/* 注册按钮容器强制显示 */
.no-login.nav-desktop-link {
display: flex !important;
height: 100% !important;
align-items: stretch !important;
}
.nav-menu .nav-item { .nav-menu .nav-item {
padding: 0 6px; padding: 0 6px;
font-size: 12px; font-size: 12px;