Bootstrap nav-justified 不占用全宽答案

【问题标题】：Bootstrap nav-justified doesn't take up full widthBootstrap nav-justified 不占用全宽
【发布时间】：2018-10-05 13:31:13
【问题描述】：

在bootstrap-4 中有一个类nav-pill 链接具有相等的宽度并占据所有水平空间：

对于等宽元素，使用.nav-justified。所有水平空间都将被导航链接占用。

至少他们是这么说的：Bootstrap: Fill and justify

这是他们的代码：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="nav nav-pills nav-justified">
   <a class="nav-link active" href="#">Active</a>
   <a class="nav-link" href="#">Longer nav link</a>
   <a class="nav-link" href="#">Link</a>
   <a class="nav-link disabled" href="#">Disabled</a>
</nav>

这似乎不能正常工作......

我是否遗漏或误解了什么？

编辑：
让我重新表述我的问题：
我了解.nav-fill 的作用。
我想了解.nav-justified 做了什么以及为什么没有像他们说的那样工作。

【问题讨论】：

你的行为是什么？
我已编辑问题以澄清我的“问题”。
您可能希望将 Bootstrap 升级到稳定版。
@Klooven 4.0和4.1我都试过了，但是结果是一样的。

标签： bootstrap-4 html css bootstrap-4 nav justify

【解决方案1】：

你需要再添加一个类导航项

<nav class="nav nav-pills nav-fill">
   <a class="nav-item nav-link active" href="#">Active</a>
   <a class="nav-link nav-item" href="#">Longer nav link</a>
   <a class="nav-link nav-item" href="#">Link</a>
   <a class="nav-link nav-item disabled" href="#">Disabled</a>
</nav>

工作Jsfiddle

【讨论】：

【解决方案2】：

您需要遵循引导程序html 结构来实现此目的。您需要将a 标签包装在li 中，并在ul 中提供li 类nav-item，然后将ul 类提供nav nav-pills nav-fill

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">


<ul class="nav nav-pills nav-fill">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Longer nav link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled</a>
  </li>
</ul>

工作小提琴here

【讨论】：

如果这个或任何答案已经解决了您的问题，请考虑通过单击复选标记接受它。这向更广泛的社区表明您已经找到了解决方案，并为回答者和您自己提供了一些声誉。没有义务这样做。 :)

【解决方案3】：

将nav-fill 类添加到nav 元素。 .nav-justified 使用相同宽度的链接。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<h6>Using nav-fill (to achive dynamic width link as link content</h6>
<nav class="nav nav-pills nav-fill">
   <a class="nav-item nav-link active" href="#">Active</a>
   <a class="nav-link nav-item" href="#">Longer nav link</a>
   <a class="nav-link nav-item" href="#">Link</a>
   <a class="nav-link nav-item disabled" href="#">Disabled</a>
</nav>
<h6>Using nav-fill and nav-justified (to achive same width link)</h6>
<nav class="nav nav-pills nav-fill nav-justified">
   <a class="nav-item nav-link active" href="#">Active</a>
   <a class="nav-link nav-item" href="#">Longer nav link</a>
   <a class="nav-link nav-item" href="#">Link</a>
   <a class="nav-link nav-item disabled" href="#">Disabled</a>
</nav>

或者，如果您愿意，您可以在没有引导程序的情况下执行此操作。为了更好地理解。

.custom-nav {
  display: flex;
}

.custom-nav a {
  flex: 1 1 auto; /* this line do all magic */ 
  border: 1px solid #ccc;
  text-align: center;
  padding: 10px 20px;
}

    <nav class="custom-nav">
       <a  href="#">Active</a>
       <a  href="#">Longer nav link</a>
       <a  href="#">Link</a>
       <a  href="#">Disabled</a>
    </nav>

【讨论】：