如何避免Bootstrap顶部Banner在1024x768分辨率下换行？

问题分析 #

你当前使用的是Bootstrap 3的老旧类名（如navbar-inverse、navbar-static-top），这些在Bootstrap 5中已被废弃，导致布局在1024x768分辨率下无法正确适配。我们需要基于Bootstrap 5的flexbox布局体系重构Banner，同时满足固定顶部、Logo居左、标题居中、用户名居右的要求。

修改后的代码 #

CSS 样式

.headerBackGroundColor { 
    background-color: cyan;
    padding: 0.5rem 1rem; /* 增加内边距优化元素间距 */
}
body {
    padding-top: 60px; /* 防止页面内容被固定导航栏遮挡 */
}
.logo img {
    height: 40px; /* 固定Logo高度，保持导航栏高度一致 */
}

HTML 结构

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar fixed-top headerBackGroundColor">
    <div class="container-fluid d-flex align-items-center">
        <!-- Logo 区域 -->
        <div class="logo">
            <a href="">
                <img src="https://via.placeholder.com/100" alt="Title" />
            </a>
        </div>
        <!-- 居中标题 -->
        <div class="flex-grow-1 text-center">
            Application Title on Banner Goes Here
        </div>
        <!-- 用户信息区域 -->
        <div class="ms-auto">
            <button class="btn btn-default" type="button" style="cursor:default !important;">
                <span class="user-name">Welcome loggedInUser</span>
            </button>
        </div>
    </div>
</nav>

关键改动说明 #

1. 固定顶部：使用fixed-top类替代老旧的navbar-static-top，确保导航栏始终固定在视口顶部。
2. Flex布局适配：
   • container-fluid d-flex align-items-center创建全屏flex容器，垂直居中所有元素。
   • flex-grow-1让标题区域占据Logo和用户信息之间的所有可用空间，配合text-center实现标题居中。
   • ms-auto将用户信息区域推至导航栏最右侧。
3. 移除废弃类名：删除Bootstrap 3的navbar-inverse、navbar-header、navbar-right等无效类名，适配Bootstrap 5的规范。
4. 兼容性优化：通过固定Logo高度和页面顶部内边距，避免布局偏移和内容遮挡问题。

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