引导4组件未在Angular 4测试应用程序中格式化

我正在Angular 4中构建一个简单的测试应用程序，并为Angular安装了boostrap 4（按照此处的说明

https://ng-bootstrap.github.io/#/getting-已启动

）

我已经将boostrap导入根模块和简单的navbar菜单组件，该组件使用bootstrap类（代码取自一个正在工作的plnkr示例）

我的应用程序显示菜单，但仅作为列表，而不是引导css/js的格式。我可以发布代码，但我不认为这是问题所在，因为我完全遵循了上面的链接

这种症状是否足以让人提出建议？如果没有，我将开始发布代码片段

---

更新：

我添加了boostrap的CSS链接，现在列表项不再可见（只有“品牌”和小灰框），因此CSS起到了帮助作用。导航条的正确呈现似乎是一个单独的问题，所以我将其拆分

---

答案是添加到Bootstrap 4 CSS的链接，即使ng Bootstrap网站没有说这是必需的。

您是否将Bootstrap CSS文件链接到您的项目中？通常，您会在项目的根目录（css目录）中包含这些内容，然后将它们链接到

index.html

文件中，如下所示：

  <link rel="stylesheet" href="./css/bootstrap.min.css">
  <link rel="stylesheet" href="./css/bootstrap-grid.min.css">
  <link rel="stylesheet" href="./css/bootstrap-reboot.min.css">

  index.html
  /css/

您可以在此处下载引导代码：

然后将css目录复制到项目目录的根目录

如果要使用从引导CDN服务器（内容交付网络）托管的引导代码，而不是维护自己的本地副本，请在此处链接到它们：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">

---

不要链接到引导公共页面使用的样式表，因为这些链接将来可能会更改，从而意外破坏您的站点。

当您查看Chrome开发工具时，是否正在加载引导文件？听起来好像不是。是的，我的示例页面会出现在浏览器中（由ng new project创建），并且“ng serve”窗口会显示所有内容。只是菜单显示为嵌套列表，而不是引导4格式的菜单。可能我误解了。如果我查看开发人员工具的“网络”选项卡，我可以检查正在加载哪些文件，但我到底应该查找什么文件？（我不确定Angular的Boostrap4是如何分解成文件的）。CSS和JS文件中会显示Bootstrap。如果它们没有在那里加载，您将无法加载goodness.only.js文件，但我怀疑webpack已将所有内容捆绑在一起，因此您实际上看不到任何css文件加载。使用Angular4+NgBootstrap4，这是一个不同的世界。您确定Angular4项目需要使用Bootstrap吗？他们的指令（）和下载的代码没有说要做任何事情是的-你需要CSS。如果您使用的是ng bootstrap，那么您不需要CSS，您只需要npm安装ng bootstrap项目，它将所有JavaScript作为正确的角度指令来实现，但是您需要CSS。我使用的是如上所述安装的ng bootstrap，因此我应该可以不参考CSS文件。但是，我开始认为NAVBAR不包括在ng引导中（但这似乎是一个巨大的疏忽，它不可能是正确的），我正在使用ng引导。相信我，你需要CSS。我接受了你上面的答案，因为可见的列表项似乎与缺少的CSS完全相关。（不过，我建议更新您对ng引导程序的回答）。关于导航栏的正确呈现，我在这里提出了一个新问题：