nav-pills nav-stacked 不工作

Question

我正在尝试使用 nav stacked 制作带有 nav pills 的垂直菜单。问题是它似乎不起作用。它保留 "horizontal" 值。我发现解决方案没有实现 nav stacked 但我需要以这种方式使用它。

实施此：

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

希望对您有所帮助

nav-pills nav-stacked 不工作

nav-pills nav-stacked not working

html

nav

bootstrap-4