导航丸导航堆叠不起作用

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用于堆叠菜单。使用该片段作为参考。

<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>

希望这可以帮助