VS 2019 ASP.Net 核心 + React 模板 -- 你如何显示 NavbarToggler？

Question

重现问题的步骤：

1. 打开 Visual Studio 2019
2. Select 创建一个新项目....
3. Select ASP.Net 带有 React 和 Redux 模板的核心应用程序，以及 select 保存项目的位置。
4. Select 您的 .Net Core 版本（在我的例子中，它是 .NET Core 3.1 (LTS)
5. 完成模板设置。
6. 点击 F5 进行构建，运行 加载解决方案后。

新的应用程序工作正常，但是如果您打开 ..\ClientApp\src\components\NavMenu.tsx 文件，您会看到有对 NavbarToggler React 组件的引用。当演示加载时，我们看到 NavItem 链接列表呈现到页面上的导航栏，但切换器不显示或工作。

如何显示 NavbarToggler？

进一步的测试表明 Navbar Bootstrap 组件不工作。其他 Bootstrap 组件也有可能无法正常工作。

我有一个新项目需要处理，我需要这些工具。我可以搜索其他第三方组件库，但遗憾的是，演示中引用的内容可以满足我公司的需求，但是，默认情况下的实现 React 模板不起作用。我想坚持使用 Bootstrap，因此将不胜感激。

Answer 1

如果您查看 React 生成的 HTML 代码，您会注意到为 <NavbarToggler> 生成的 元素具有以下 CSS 样式：

这意味着 <NavbarToggler> 适用于移动设备，事实上，如果您将浏览器 window 的宽度调整到 576 像素以下，则会出现该按钮：

<NavbarToggler>的目的是隐藏<Navbar>的内容，并添加一个按钮来展开<Navbar>。所以 React 模板项目中的 <NavbarToggler> 按预期工作。如果你不想要这种行为，你将不得不向 <Navbar> 添加不同的 classes（见下文）或修改 Bootstrap CSS 尽管我不会不推荐这个。

您可以在 Bootstrap documentation 中阅读有关如何控制 <NavbarToggler> 的更多信息：

Navbars can utilize .navbar-toggler, .navbar-collapse, and .navbar-expand{-sm|-md|-lg|-xl} classes to change when their content collapses behind a button. In combination with other utilities, you can easily choose when to show or hide particular elements.

For navbars that never collapse, add the .navbar-expand class on the navbar. For navbars that always collapse, don’t add any .navbar-expand class.

如果您想一直显示 <NavbarToggler>，请从 <Navbar> 和 d-sm-inline-flex [=46= 中删除 navbar-expand-sm class ] 来自 <Collapse>.