Question

我正在尝试使用内置旋转木马的组件。

 <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 { }

问题是图像没有堆叠。我是否需要进口更多东西，或者我缺少必要的东西？

Angular Version：2.0.2 ng-bootstrap：@latest

我在没有system.js的情况下使用Angular-cli。

Answer 1

这不适用于Bootstrap 3.当您迁移到4.0版时，问题就会消失。

Answer 2

我有同样的问题，并添加了cdn，它运行正常。如果您不想引用cdn添加bootstrap至styles in。angular-cli.json`。

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

Answer 3

我也有这个问题，原因是我试图通过无效路径引入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 个答案: