Bootstrap 4 组件未在 Angular 4 测试应用程序中格式化答案

【问题标题】：Bootstrap 4 component not formatting in Angular 4 test appBootstrap 4 组件未在 Angular 4 测试应用程序中格式化
【发布时间】：2018-01-14 06:14:32
【问题描述】：

我正在 Angular 4 中构建一个简单的测试应用程序，并为 Angular 安装了 boostrap 4（根据此处的说明 https://ng-bootstrap.github.io/#/getting-started）。

我已将 boostrap 导入到根模块和使用引导类的简单导航栏菜单组件中（代码取自工作 plnkr 示例）。

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

这种症状是否足以让某人提供建议？如果没有，我将开始发布代码 sn-ps。

更新：

我添加了指向 boostrap 的 CSS 的链接，现在列表项不再可见（只有“品牌”和小灰色框），因此 CSS 提供了帮助。导航栏的正确渲染似乎是一个单独的问题，所以我把它分开了。

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

【问题讨论】：

当您查看 Chrome 开发工具时，Bootstrap 文件是否正在加载？听起来他们不是。
是的，我的示例页面出现在浏览器中（由 ng 新项目创建），并且“ng serve”窗口显示编译正常。只是菜单显示为嵌套列表，而不是引导程序 4 格式化的菜单。
也许我理解错了。如果我查看开发人员工具的 NETWORK 选项卡，我可以检查哪些文件正在加载 - 但我究竟应该寻找什么文件？（我不确定 Boostrap 4 for Angular 是如何分解成文件的）。
CSS 和 JS 文件会在其中显示 Bootstrap。如果它们没有被加载到那里，你就不会得到好处。
仅加载 .js 文件，但我怀疑 webpack 已将所有内容捆绑在一起，因此您实际上看不到任何 css 文件加载。使用 Angular4+NgBootstrap4 是一个不同的世界

标签： angular bootstrap-4 ng-bootstrap

【解决方案1】：

您是否将 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/

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

http://v4-alpha.getbootstrap.com

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

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

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

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

【讨论】：

您确定 Bootstrap for Angular 4 项目有必要这样做吗？他们的指令 (ng-bootstrap.github.io/#/getting-started) 和下载的代码并没有说要这样做
是的 - 你需要 CSS。如果您使用的是 ng-bootstrap，则不需要 CSS，您只需 npm install ng-bootstrap 项目，它将所有 JavaScript 实现为正确的 Angular 指令，但您需要 CSS。
我正在使用如上安装的 ng-bootstrap，所以我应该可以不参考 css 文件。但是，我开始认为 navbar 不包含在 ng-bootstrap 中（但这似乎是一个巨大的疏忽，它不可能是正确的）
我正在使用 ng-bootstrap。相信我，你需要 CSS。
我接受了您上面的回答，因为可见的列表项似乎与缺少的 CSS 完全相关。（我建议更新您对 ng-bootstrap 特定的答案）。至于导航栏的正确渲染，我在这里打开了一个新问题：stackoverflow.com/questions/45552429/…