带有引导程序 4 弹性框的中心导航项

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

> 你应该对项目"Store: 297"使用以下css：

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

并为通知下拉列表添加类"ml-auto">