轮播图像不堆叠答案

【问题标题】：Carousel images don't stack轮播图像不堆叠
【发布时间】：2017-03-02 05:55:36
【问题描述】：

我正在尝试有一个内部带有轮播的组件。

 <ngb-carousel>
  <template ngbSlide>
    <img src="img1" alt="Random first slide">
    <div class="carousel-caption">
      <h3>First slide label</h3>
      <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
    </div>
  </template>
  <template ngbSlide>
    <img src="img2" alt="Random second slide">
    <div class="carousel-caption">
      <h3>Second slide label</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
  </template>
  <template ngbSlide>
    <img src="img3" alt="Random third slide">
    <div class="carousel-caption">
      <h3>Third slide label</h3>
      <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
    </div>
  </template>
</ngb-carousel>

这是我的组件：

import {Component} from '@angular/core';

import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
@Component({
  selector: 'img-carousel',
  templateUrl: './img-carousel.component.html',
  styleUrls: ['./img-carousel.component.scss']
})
export class ImgCarouselComponent {
}

这是module.ts：

import { NgModule } from '@angular/core';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

import { BookingComponent }   from './booking.component';
import { ImgCarouselComponent } from './img-carousel/img-carousel.component';

@NgModule({
    imports: [NgbModule.forRoot()],
    exports: [BookingComponent],
    declarations: [BookingComponent, ImgCarouselComponent],
    providers: [],
})

export class BookingModule { }

问题是图像没有堆叠。我需要导入更多的东西，还是缺少一些重要的东西？

角度版本：2.0.2 ng-bootstrap: @latest

我正在使用没有 system.js 的 Angular-cli。

【问题讨论】：

我发现了问题。我在我的应用程序的其余部分使用引导程序 3，但是需要引导程序 4 才能工作。希望它有所帮助，因为它不会出错并且会默默地失败。

标签： angular ng-bootstrap

【解决方案1】：

我遇到了同样的问题并添加了cdn，它运行良好。如果您不想引用cdn，请将bootstrap 添加到styles in.angular-cli.json`。

"styles": [
    "styles.css",
    "../node_modules/bootstrap/dist/css/bootstrap.css"
  ]

【讨论】：

【解决方案2】：

我也遇到了这个问题，原因是我试图通过无效路径拉入 CSS。当我刚刚使用 CDN 时，一切正常。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">

【讨论】：

【解决方案3】：

这不适用于 Bootstrap 3。当您迁移到 4.0 版后问题就消失了。

【讨论】：