Bootstrap导航栏logo居左菜单项居右横向排列问题咨询

问题原因排查 #

• 缺少 navbar-expand-* 类：Bootstrap 导航栏默认是垂直堆叠布局，只有添加了navbar-expand-sm/navbar-expand-md这类响应式展开类后，才会在对应尺寸以上切换为横向布局，你现在没加这个类所以菜单项垂直排列
• 导航栏容器的flex对齐逻辑异常：你额外加的绝对定位偏移样式和默认导航栏布局逻辑冲突，且logo和文字的对齐参数需要调整
• 多余的空<li>标签：你用来做间距的<li>&nbsp;</li>不符合导航栏列表结构规范，会破坏布局

修复后的完整代码 #

<nav class="navbar navbar-expand-md" style="background-color: #264653; position:absolute; top:0; left:0; width:100%;">
  <div class="container-fluid">
    <a class="navbar-brand d-flex align-items-center" href="#">
      <img src="~/Images/InfoOrange.png" alt="ACR" width="80" height="80" class="d-inline-block align-middle mr-2" runat="server" />
      <span style="font-size:25px;color:white;">
        <span style="color:#e9c46a">Test City</span><br />Test Company
      </span>
    </a>
    <div id="navbarSupportedContent" class="collapse navbar-collapse">
      <ul class="navbar-nav ms-auto gap-3">
        <%-- <li class="nav-item active"><a href="#" class="nav-link">Home <span class="sr-only">(current)</span></a></li>--%>
        <li class="nav-item dropdown nav-item active">
          <a class="nav-link dropdown-toggle" href="#" id="userDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="color:white;">
            Users
          </a>
          <div class="dropdown-menu" aria-labelledby="userDropdown">
            <a class="dropdown-item" href="#">Details</a>
            <a class="dropdown-item" href="Depatment.aspx">Department</a>
            <%-- <a class="dropdown-item" href="#">Sections</a>--%>
          </div>
        </li>
        <li class="nav-item dropdown nav-item active">
          <a class="nav-link dropdown-toggle" href="#" id="admindropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="color:white;">
            Admin
          </a>
          <div class="dropdown-menu" aria-labelledby="admindropdown">
            <a class="dropdown-item" href="NewBoxFolder.aspx">Box/Folder</a>
            <a class="dropdown-item" href="#">Configuration</a>
          </div>
        </li>
        <li class="nav-item dropdown nav-item active">
          <a class="nav-link dropdown-toggle" href="#" id="recordsDropDown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="color:white;">
            Records
          </a>
          <div class="dropdown-menu" aria-labelledby="recordsDropDown">
            <a class="dropdown-item" href="FileUpload.aspx">BlockChain Upload</a>
            <a class="dropdown-item" href="#">Verify</a>
            <a class="dropdown-item" href="DocReport.aspx">Report</a>
            <a class="dropdown-item" href="BucketList.aspx">S3 List</a>
          </div>
        </li>
      </ul>
    </div>
  </div>
</nav>

关键修改点说明 #

• 给<nav>标签新增了navbar-expand-md类：中等屏幕（768px）以上自动展开导航栏为横向布局，小屏幕下自动折叠为汉堡菜单，符合Bootstrap导航栏的标准逻辑，如果你希望所有尺寸下都横向排列，直接改为navbar-expand即可
• 调整了导航栏的定位样式：把原来的left:50% transform:translateX(-50%)改成left:0，避免偏移异常
• 优化了logo区域的布局：给navbar-brand加了align-items-center类，让图标和文字垂直居中对齐
• 移除了多余的空<li>标签，用gap-3类给菜单项加间距，布局更规范，Bootstrap4版本可自行给每个nav-item加mr-3类实现相同间距效果
• 补全了下拉菜单aria-labelledby属性和对应触发器id的匹配，避免无障碍和交互异常
• 给导航链接加了白色文字样式，和深色导航栏背景适配
• 如果你使用的是Bootstrap4版本，把代码中的ms-auto替换为ml-auto即可

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