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

Question

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

我已经将 boostrap 导入到根模块和我的简单导航栏菜单组件中，该组件使用 bootstrap 类（代码取自一个有效的 plnkr 示例）。

我的应用程序显示菜单，但仅显示为列表，而不是 bootstrap css/js 的格式。我可以 post 编码，但我不认为这是问题所在，因为我完全按照上面的 linked 进行了。

这种症状是否足以让某人提供建议？如果没有，我将开始 posting 代码片段。

更新：

我将 link 添加到 boostrap 的 CSS，现在列表项不再可见（只有 'brand' 和小灰色框）所以 CSS 有帮助.导航栏的正确渲染似乎是一个单独的问题，所以我把它分开了。

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

Answer 1

您是否link将 Bootstrap css 文件添加到您的项目中？通常，您会将这些包含在项目的根目录中（在 css 目录中），然后将它们 link 放入您的 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/

您可以在此处下载 Bootstrap 代码：

http://v4-alpha.getbootstrap.com

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

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

不要 link Bootstrap public 页面使用的样式表，因为这些 link 将来可能会发生变化，从而意外破坏您的网站。

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

Bootstrap 4 component not formatting in Angular 4 test app

bootstrap-4

ng-bootstrap

angular