nav-pills nav-stacked 不工作

Question

我正在尝试使用导航堆叠来制作带有导航药丸的垂直菜单。问题是它似乎不起作用。它保持“水平”值。我找到了没有实现导航堆叠的解决方案，但我需要以这种方式使用它。

实现这个：

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

我曾尝试使用旧版本，但我的网页的其余部分发生了变化，我不想这样做。

<ul class="nav nav-pills nav-stacked">
<li class="nav-item">
<a class="nav-link active" href="#">Section 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Section 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Section 3</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Section 4</a>
</li>
</ul>

Answer 1

nav-stacked 在 Bootstrap 4 中已被弃用。使用 flex-column 堆叠您的菜单。使用 sn-p 作为参考。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<ul class="nav nav-pills flex-column">
<li class="nav-item">
<a class="nav-link active" href="#">Section 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Section 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Section 3</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Section 4</a>
</li>
</ul>

希望对你有帮助