2

我正在尝试使用 ng-bootstrap 在我的 Angular2 项目中使用引导程序。

按照他们的指示，我添加了引导 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 { }

但是当我尝试创建一个简单的消息板模板时，它并没有按预期工作。当我离开 Ngbmodule 时，似乎没有任何改变。

奇怪的是，当我从 bootstrap 4 css 更改为 bootstrap 3.3.6 css 时，更多的工作按预期工作，但像文本区域这样的简单事物仍然根本没有样式。

在安装 ng-bootstrap 的过程中我做错了吗？欢迎任何帮助。

更新

这是我正在使用的标记和我的输出示例：http ://plnkr.co/edit/A9DySwR3PBNJShRFi27Q?p=preview

虽然这是我使用相同代码在 angular-1 项目上实现的结果：http: //prnt.sc/db9azv

4

1 回答 1

2

您的问题似乎并不特定于https://ng-bootstrap.github.io项目，而是仅针对 Bootstrap 的 4 CSS。根据您的示例，我认为您的 CSS 类名称中只是有一个错字 - 它应该是form-control而不是 form control。

这是一个工作 plunker：http ://plnkr.co/edit/hfvCwMistZdIWUlOAthM?p=preview

于 2016-11-24T15:14:54.367 回答