Ruby on rails Ng引导日期选择器未设置样式

我正在使用Angular 4.4.6和rails 5.1.4

我将使用来自的datepicker

首先，我创建了文件夹

app/javascript/DatePicker

及其文件

app/javascript/DatePicker/DatePicker basic.html

和

app/javascript/DatePicker/index.ts.

然后，将代码从资源插入这些文件，更改模板的路径

// app/javascript/DatePicker/index.ts

import {Component} from '@angular/core';
import {NgbDateStruct} from '@ng-bootstrap/ng-bootstrap';

import template from './datepicker-basic.html'

const now = new Date();

@Component({
  selector: 'ngbd-datepicker-basic',
  template: template
})
export class NgbdDatepickerBasic {

model: NgbDateStruct;
date: {year: number, month: number};

selectToday() {
    this.model = {year: now.getFullYear(), month: now.getMonth() + 1, 
day: now.getDate()};
  }
}

// app/javascript/DatePicker/datepicker-basic.html

<p>Simple datepicker</p>

<ngb-datepicker #dp [(ngModel)]="model" (navigate)="date = $event.next">
</ngb-datepicker>
<hr/>
<button class="btn btn-sm btn-outline-primary" 
       (click)="selectToday()">
  Select Today
</button>
<button class="btn btn-sm btn-outline-primary" 
        (click)="dp.navigateTo()">
  To current month
</button>
<button class="btn btn-sm btn-outline-primary" 
              (click)="dp.navigateTo({year: 2013, month: 2})">
  To Feb 2013
</button>
<hr/>
<pre>Month: {{ date.month }}.{{ date.year }}</pre>
<pre>Model: {{ model | json }}</pre>

最后，我添加了标签

转到我要查看日期选择器的页面

日历已经出现并且可以使用，但问题是它被放在了一个完整的页面中。日期在页面底部放置一列。也就是说，CSS样式未应用于日历

我做错了什么？有人能帮我吗？

---

提前感谢

从下载并将bootstrap.css包含到您的项目中

从下载并将bootstrap.css包含到您的项目中

通过Thread将bootstrap从3更新到4.0.0-beta2

import { NgbdDatepickerBasic } from "../DatePicker/index";
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

.........


var CustomerAppModule = NgModule({
imports: [
    BrowserModule,
    FormsModule,
    HttpModule,

    NgbModule.forRoot(),

    routing
],
declarations: [
    CustomerSearchComponent,
    CustomerDetailsComponent,
    CustomerInfoComponent,
    TextFieldComponent,
    FilterByPipe,

    NgbdDatepickerBasic,

    AppComponent
],
bootstrap: [ AppComponent ]
})

<ngbd-modal-basic></ngbd-modal-basic>