Twitter bootstrap ng引导程序不工作（angular2）

我正在尝试在我的Angular2项目中使用引导，使用ng引导

按照他们的说明，我添加了引导css文件，在我的systemJS配置中映射了@ng bootstrap，安装了ng bootstrap，并将其主模块添加到我的根模块：

import { NgModule }       from '@angular/core';
import { BrowserModule }  from '@angular/platform-browser';
import { FormsModule }    from '@angular/forms';

import { NgbModule }            from '@ng-bootstrap/ng-bootstrap';
import { AppComponent }         from './app.component';
import { HeaderComponent }      from './header/header.component';
import { AppRoutingModule }     from './app-routing.module';

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    AppRoutingModule,
    NgbModule.forRoot()
  ],
  declarations: [
    AppComponent,
    HeaderComponent
  ],
  providers: [ HeroService ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

---

但当我尝试创建一个简单的消息板模板时，它并没有像预期的那样工作。当我不使用NGB模块时，似乎没有任何变化

奇怪的是，当我从bootstrap4css更改为bootstrap3.3.6css时，更多的功能如预期的那样发挥作用，但是像文本区域这样的简单内容仍然没有设置样式

在安装ng引导程序的过程中，我是否做错了什么？欢迎任何帮助

更新

这是我正在使用的标记和我的输出示例：

虽然这是我使用相同代码在angular-1项目上实现的结果：

---

您的问题似乎不是针对项目的，而是针对引导的4个CSS。基于您的示例，我认为您的CSS类名中有一个输入错误-它应该是

表单控件

，而不是

表单控件

---

这是一个有效的例子：

“但是当我尝试创建一个简单的消息板模板时，它并没有按预期工作。当我不使用Ngbmodule时，似乎没有任何变化。”-这里不太清楚您所说的“没有按预期工作”是什么意思。你能说得更具体些吗？在任何情况下，这里都有一个最小的plunker，它显示了一个正常工作的ng引导组件：-尝试使用此plunker作为起点重现您的问题。

ng引导

仅适用于

bootstrap-4

版本。。你可以签出这个啊，谢谢你的例子！这对我来说更清楚了。我也开始认为我期待的这种行为可能是不正确的。这就是我正在使用的标记：这就是我所期望的：@Pankaj Parkar是的，我已经读过了，这就是为什么我说3.3.6版本比4.0版本更好，这很奇怪@麦克斯·泰勒不，我从几周前就开始做了。我遇到的情况是，BS3版本没有任何东西可以使用。BS4的一切都很好，是的，我刚刚发现他们在Bootstrap4中删除了“面板”。这个打字错误也是问题的一部分，让我觉得这一切都不起作用。无论如何，谢谢你的帮助，我想我应该开始学习卡片了！