导航栏引导程序4中的等宽答案

【问题标题】：Equal widths in navbar bootstrap 4导航栏引导程序4中的等宽
【发布时间】：2020-03-14 00:44:57
【问题描述】：

需要一些帮助来设计带有 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>

【问题讨论】：

抱歉，全宽居中。会更新原帖

标签： html css bootstrap-4 flexbox navbar

【解决方案1】：

您必须根据项目的数量设置宽度才能做到这一点。没有 flexbox 属性可以为您管理它。

.nav-fill .nav-item {
    flex: 1 0 20%; /* 5 items of 20% each */
    text-align: center;
    border:1px solid red;
}

Codepen Example

【讨论】：

感谢 Paulie，这似乎成功了。通过扩展，如果我想限制导航栏扩展的程度（比如只有视图宽度的 70%），有没有一种简单的方法可以做到这一点？我正在努力寻找可以实现这一点的正确类。原始帖子中的第一个图已更新以显示我所追求的。
如果你想限制导航栏的宽度，只需使用max-width:70%..并根据需要将其居中。

【解决方案2】：

您可以使导航项的 flex-basis: 100%（而不是 auto）。还允许它们收缩（设置最小宽度也是必要的，因为explained here）...

.nav-item {
    flex: 0 1 100%;
    min-width: 0.1px;
}

然后，当较长的链接比其他链接更宽时，您需要考虑如何处理溢出文本的隐藏。我会像这样使用text-overflow: ellipsis;...

.nav-link {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

演示：https://codeply.com/p/N8MvGaunOR

【讨论】：