在 Bootstrap 导航栏中放置更多项目答案

【问题标题】：Putting more items in Bootstrap Navbar在 Bootstrap 导航栏中放置更多项目
【发布时间】：2021-12-29 17:56:08
【问题描述】：

我有一个引导导航栏。我想将 signOut 和 welcome 与其他菜单项一起放在菜单栏中。下面是我的导航栏截图：

我想把 SignOut 放在紫色箭头所在的位置，在“SignOut”的正下方，我想放“Welcome userName”。我还想将徽标和公司/城市名称移动到导航栏的最左侧。我怎样才能做到这一点？以下是我的代码：

 <nav class="navbar navbar-expand-lg py-5 navbar-dark  shadow-sm " style="background-color: #264653;width:100%;" >
  <div class="container">


      <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>
    
    </div>
      <div>
          <ul>
                 
        <li class="nav-item" style="margin-right:5px" >
            <a class="nav-link px-5" href="<%= ResolveUrl("~/Pages/SignOut.aspx") %>">Sign Out</a>
        </li>
 
          </ul>
      </div>
  </div>
</nav>

【问题讨论】：

您的“容器”div 阻止您这样做。检查 .container css 中的最大宽度并根据口味进行调整。

标签： css bootstrap-4 flexbox

【解决方案1】：

您可以将这个部分包含在一个类中。在这种情况下，我称之为<div class="sign">。然后，由于您的 ul 是父级的直接子级，您可以在 CSS 中使用 .sign > ul 来定位该 div。要将其置于该位置，您只需应用 absolute positioning 即可定义页面区域。在您的应用程序中，右上角。然后，您可以在下方的 Welcome & Username 区域中添加其他无序列表项。

.sign > ul {
  position: absolute;
  top: 0;
  right: 0;
  list-style-type: none;
}

<div class="sign">
   <ul>
      <li class="nav-item" style="margin-right:5px" >
         <a class="nav-link px-5" href="<%= ResolveUrl("~/Pages/SignOut.aspx") %>">Sign Out</a>
      </li>
   </ul>
</div>

【讨论】：