基于.NET Core教程：如何将Bootswatch的nav类从block改为flex？

我正在学习一个使用.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>

想请教一下，能不能把Bootswatch中.nav类的布局定义从block修改为flex？

当然可以修改！不过直接改动Bootswatch的源文件并不是最佳实践——后续更新Bootswatch时，你的自定义修改很容易被覆盖掉。这里给你几个更稳妥的实现方案：

方案1：用自定义CSS覆盖默认样式 #

你可以在项目的自定义样式文件中添加如下代码，让它的优先级高于Bootswatch的默认样式：

/* 将.nav的布局改为flex */
.nav {
  display: flex !important;
  /* 可选：添加flex布局的额外属性，比如设置菜单项间距 */
  gap: 1.25rem;
}

/* 可选：调整菜单项的样式以适配flex布局 */
.nav li {
  list-style: none;
  flex: 0 0 auto; /* 让菜单项保持原有宽度，不被拉伸 */
}

如果Bootswatch的默认样式优先级更高，记得加上!important，或者用更具体的选择器（比如给父容器加个自定义类，写成.custom-nav-container .nav）来提升优先级。

方案2：直接使用Bootstrap内置的flex辅助类 #

其实Bootstrap本身就提供了现成的flex布局类，完全不需要修改.nav的默认样式，直接给<ul>标签添加d-flex类就行：

<ul class="nav d-flex">
  <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>

这种方式既利用了Bootstrap的原生能力，又不会破坏Bootswatch的原有样式，后续维护起来更省心。如果需要调整布局，还可以搭配flex-row（横向排列，默认）、flex-column（纵向排列）、justify-content-between（两端对齐）等类，快速实现不同的布局效果。

方案3：修改Bootswatch源文件（不推荐） #

如果你确实需要从根源修改Bootswatch的.nav样式，可以找到Bootswatch对应的SCSS模块文件（比如_nav.scss），把其中.nav的display属性从block改成flex，然后重新编译CSS文件。但这种方式的弊端很明显：每次更新Bootswatch版本时，你都需要重新合并自己的修改，很容易出现样式冲突。

总的来说，方案2是最推荐的——简单快捷还不踩坑；如果需要更个性化的样式，方案1的自定义CSS覆盖会更稳妥。

内容的提问来源于stack exchange，提问作者Just a HK developer