css - Bootswatch 将 nav 类的定义从 block 更改为 flex？

Question

我正在学习使用 .net core、bootstrap 和 bootswatch 的教程。在教程中，有这个菜单:

<ul class="nav">
    <li><a asp-controller="App" asp-action="Index">Home</a></li>
    <li><a asp-controller="App" asp-action="About">About</a></li>
    <li><a asp-controller="App" asp-action="Contact">Contact</a></li>
    <li><a asp-controller="App" asp-action="Info">Info</a></li>
</ul>

在bower.json中，教程添加了bootstrap 3.3.5和bootswatch 3.3.7。 .net core 2程序运行时，nav的样式为:

display: block

在英语中，菜单看起来像一个有 1 列和 4 行的表格。

由于 bootstrap 和 bootswatch 4 已经在这里，我在 bower.json 中将它们升级到 4.1.0。令我惊讶的是，导航的 stylr 更改为:

display: flex

在英语中，菜单现在显示为 4 列但只有 1 行。

为什么 nav 的定义会改变？这是错误吗？

Answer 1

这不是错误。 Bootstrap 4 现在默认使用 flexbox。

因为它是一个新的主要版本，所以有些东西已经改变了。

这是一个简单的垂直导航(注意添加的类):

<nav class="nav flex-column">
  <a class="nav-link active" href="#">Active</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link disabled" href="#">Disabled</a>
</nav>

如您所见，您不再需要列表元素。但是，如果您想使用列表，请查看文档。

检查 docs获取更多信息。