Bootstrap 导航栏中的中心菜单项

Posted 2023-03-21

【中文标题】Bootstrap 导航栏中的中心菜单项

【英文标题】：Center menu items in Bootstrap nav bar

【发布时间】：2021-12-30 10:55:06

【问题描述】：

我想将菜单项放在导航栏的中心。现在我的导航栏看起来像这样：

我想将导航栏的“用户”、“管理员”和“记录”居中。我还想将徽标稍微居中对齐，而不是在导航栏的底部边缘。

下面是我的导航栏代码：

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

      <div class="nameLogo">
              <span class="navbar-brand" style="display:flex;">
        
                    <img src="~/Images/InfoOrange.png"    class="d-inline-block align-middle mr-2" runat="server" />
      
               <span style="font-size:25px;color:white;"><span style="color:#e9c46a">City of Test</span><br />COMPANY OF TEST</span>

            </span>
        </div>
    <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">
      <div>
      <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>
    </ul>
          </div>
                </div>
 
      <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>

          <div class="welcome">
          <ul>
                 
        <li class="nav-item" style="margin-right:5px" >
         Welcome  <%=userName %>
        </li>
 
          </ul>
      </div>
  </div>
</nav>

我尝试使用 Bootstrap Justify-center，但没有成功。

任何帮助将不胜感激。

【参考方案1】：

在构建网格时，将其视为积木，但定义为“包装器”。因此，一个好的开始方法是查看菜单将由哪些块组成。

在你的情况下，我会说有 4 个主要的包装部分，

导航栏本身。

标志。

菜单项（用户、管理员、记录）。

操作，即退出。

考虑到所有这些，我们可以开始构建我们的网格了。 Flex-box 具有各种方便的属性，例如：justify-content 和 align-items。

以我建议的结构为例：

.row 
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    display: flex;
    flex: 0 0 100%;
    flex-wrap: wrap;
    max-width: 100%;
    margin-top: calc(var(--bs-gutter-y) * -1);
    margin-right: calc(var(--bs-gutter-x) * -.5);
    margin-left: calc(var(--bs-gutter-x) * -.5);


.row > * 
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
    padding-right: calc(var(--bs-gutter-x) * .5);
    padding-left: calc(var(--bs-gutter-x) * .5);
    margin-top: var(--bs-gutter-y);


.col-1 
    flex: 0 0 auto;
    width: 8.33333333%;


.col-4 
    flex: 0 0 auto;
    width: 33.33333333%;


.col-8 
    flex: 0 0 auto;
    width: 66.66666667%;


.no-gutters 
    --bs-gutter-y: 0;
    --bs-gutter-x: 0;


.navbar 
    padding-left: 15px;
    padding-right: 15px;
    background-color: #324c3b;
    color: #fff;


.nav-container 
    max-height: 100%;
    justify-content: space-between;
    align-items: center;


.nav-logo 
    display: flex;
    align-items: center;
    justify-content: center;
    max-height: 100%;
    overflow: hidden;


.nav-logo > img 
    display: flex;
    height: auto;
    max-height: 100%;
    width: 100%;
    object-fit: contain;


.text-center 
    text-align: center;

<nav class="navbar row">
    <div class="nav-container row">
        <div class="nav-logo col-1">
            <img src="https://picsum.photos/150/100"  />
        </div>
        <div class="menu-container col-8">
            <div class="row no-gutters">
                <div class="menu-item col-4 text-center">
                    User
                </div>
                <div class="menu-item col-4 text-center">
                    Admin
                </div>
                <div class="menu-item col-4 text-center">
                    Records
                </div>
            </div>
        </div>
        <div class="actions-container col-1 text-center">
            <a href="#">Sign Out</a>
        </div>
    </div>
</nav>

Codepen：here.

【参考方案2】：

将 justify-content-center 类添加到 id 为 navbarSupportedContent 的 div 中，您的项目将居中。 关于徽标，我复制了您的代码，徽标文本似乎与其他项目位于同一中心线上。

JSFiddle

【讨论】：

是的，只是添加了几个字符 - <div id="navbarSupportedContent" class="collapse navbar-collapse justify-content-center">