调整Bootstrap Navbar布局 添加退出按钮、欢迎语并将logo移至最左侧

实现方案 #

你只需要调整导航栏的结构，把SignOut和欢迎语移入折叠菜单的导航列表，同时把容器改为全屏容器实现logo左贴边即可，修改后完整代码如下：

<nav class="navbar navbar-expand-lg py-5 navbar-dark shadow-sm" style="background-color: #264653;width:100%;">
  <!-- 把container改为container-fluid，消除左右内边距让logo贴最左 -->
  <div class="container-fluid">
    <span class="navbar-brand" style="display:flex;">
      <img src="~/Images/InfoOrange.png" alt="ACR" width="70" height="70" 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>
    </span>

    <button type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler"><span class="navbar-toggler-icon"></span></button>

    <div id="navbarSupportedContent" class="collapse navbar-collapse">
      <ul class="navbar-nav ml-auto">
        <%-- <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">
            Users
          </a>
          <div class="dropdown-menu" aria-labelledby="navbarDropdown">
            <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>&nbsp;</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">
            Admin
          </a>
          <div class="dropdown-menu" aria-labelledby="navbarDropdown">
            <a class="dropdown-item" href="NewBoxFolder.aspx">Box/Folder</a>
            <a class="dropdown-item" href="#">Configuration</a>
          </div>
        </li>
        <li>&nbsp;</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">
            Records
          </a>
          <div class="dropdown-menu" aria-labelledby="navbarDropdown">
            <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>
        <li>&nbsp;</li>

        <!-- 新增的SignOut和欢迎语项 -->
        <li class="nav-item d-flex flex-column align-items-center justify-content-center" style="margin-right:5px">
          <a class="nav-link px-5" href="<%= ResolveUrl("~/Pages/SignOut.aspx") %>">Sign Out</a>
          <!-- 下方欢迎语，userName替换为你实际的用户名变量 -->
          <small class="text-white d-block">Welcome userName</small>
        </li>
      </ul>
    </div>
    <!-- 原来的外部SignOut容器已删除，不需要保留 -->
  </div>
</nav>

核心修改说明 #

• 容器从container改为container-fluid，去掉默认的左右边距，logo自然贴合导航栏最左侧
• SignOut项移入右侧导航列表末尾，自动排在你需要的最右侧位置
• 给SignOut导航项添加弹性盒垂直排列样式，实现链接在上、欢迎语在下的布局，小屏幕折叠后也会正常显示在菜单列表末尾

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