需要使用Bootstrap 4和flex box设计导航栏样式的帮助。我想要的设计本质上如下，但是我希望徽标位于中间，因此链接两侧的空间应相等。
--------------------------------------------------------------
| | Link | Link | Logo | LongerLink | LongerLink | |
--------------------------------------------------------------
我目前遇到的问题是LongerLink项比较短的Links占用更多的空间，因此徽标向左偏移。我该如何解决？下面的代码。
.navbar {
background-color: #389FCE;
height: 100px;
display: flex;
}
.navbar-nav {
width: 100%;
display: flex;
flex: 1;
min-width: 0;
justify-content: space-between;
align-items: center;
}
.nav-link {
font-family: 'Nexa-Bold',sans-serif;
font-style: normal;
font-weight: 700;
font-size: 20px;
color: white;
line-height: 80px;
}<nav class="navbar navbar-expand-sm">
<button class="navbar-toggler" data-toggle="collapse" data-target="#collapsibleNavbar" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon">
<i class="fas fa-bars" style="color:white; font-size:28px;"></i>
</span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav nav-fill w-100">
<li class="nav-item">
<a class="nav-link" id="shortLink" href="#">HOME</a>
</li>
<li class="nav-item">
<a class="nav-link" id="shortLink" href="#">ABOUT</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<img src="images/Logo_navbar.png">
</a>
</li>
<li class="nav-item">
<a class="nav-link" id="longLink" href="#">PRODUCTS</a>
</li>
<li class="nav-item">
<a class="nav-link" id="longLink" href="#">CONTact</a>
</li>
</ul>
</div>
</nav>