带Bootstrap 4 Flexbox的中央导航项目

Question

我正在使用flexbox类通过Bootstrap 4构建实用工具。我无法将导航栏的整个宽度居中放置在“ Store：297”这个中间项目上，而是将它放在周围的各个项目之间居中。

是否有办法使导航条相对于导航条居中，而不是导航条中的项？

谢谢！

<div class="utility navbar navbar-expand-sm navbar-dark bg-dark">
  <div class="bd-highlight">
    <a class="customer-view-unlock" href="./index.html">
        <img src="assets/unlocked.svg" alt="customer-view-toggle"/>
    </a>
  </div>

  <div class="store-select mx-auto dropdown justify-content-center">
    <a class="nav-link dropdown-toggle" href="#" id="store-select" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" >Store: 297</a>
    <div class="mx-auto dropdown-menu" aria-labelledby="store-select">
      <a class="dropdown-item" href="#">298</a>
      <a class="dropdown-item" href="#">299</a>
      <a class="dropdown-item" href="#">300</a>
      <a class="dropdown-item" href="#">301</a>
    </div>
  </div>

  <div class="notifications dropdown">
    <a class="nav-link" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
        <h5>3</h5>
    </a>
    <div class="mx-auto dropdown-menu" aria-labelledby="notifications">
      <a class="dropdown-item" href="#">Message 1</a>
      <a class="dropdown-item" href="#">Message 2</a>
      <a class="dropdown-item" href="#">Message 3</a>
      <a class="dropdown-item" href="#">Message 4</a>
    </div>
  </div>
  <!-- User -->
  <ul class="navbar-nav">
    <li class="nav-item dropdown">
      <a class="nav-link pr-5" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <div class="media align-items-center">
          <span class="avatar avatar-sm rounded-circle">
            <img alt="Image placeholder" src="https://raw.githack.com/creativetimofficial/argon-dashboard/master/assets/img/theme/team-4-800x800.jpg"/>
          </span>
          <div class="media-body ml-2 d-none d-lg-block dropdown-toggle">
            <span class="mb-0 text-sm  font-weight-bold">Jessica Jones</span>
          </div>
        </div>
      </a>
      <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right">
        <div class=" dropdown-header noti-title">
          <h6 class="text-overflow m-0">Welcome!</h6>
        </div>
        <a href="../examples/profile.html" class="dropdown-item">
          <i class="ni ni-single-02"></i>
          <span>My profile</span>
        </a>
        <a href="../examples/profile.html" class="dropdown-item">
          <i class="ni ni-settings-gear-65"></i>
          <span>Settings</span>
        </a>
        <a href="../examples/profile.html" class="dropdown-item">
          <i class="ni ni-calendar-grid-58"></i>
          <span>Activity</span>
        </a>
        <a href="../examples/profile.html" class="dropdown-item">
          <i class="ni ni-support-16"></i>
          <span>Support</span>
        </a>
        <div class="dropdown-divider"></div>
        <a href="#!" class="dropdown-item">
          <i class="ni ni-user-run"></i>
          <span>Logout</span>
        </a>
      </div>
    </li>
  </ul>
</div>

Answer 1

您应在项目[css]中使用以下Store: 297：

.store-select{
  position: absolute;
  width: 120px;
  left: 0;
  right: 0;
}

并且还要为通知下拉列表添加类“ ml-auto”