無法將圖像置於ng2-bootstrap旋轉木馬中（引導程序4）

Question

我無法將圖像置於ng2-bootstrap旋轉木馬中。根據bootstrap 4文檔，我們只需要使用img-fluid類。

<img class="img-fluid" [src]="slidez.image"> 

這是我整個的div：

<div class="row"> 
    <div class="col-md-12"> 
     <carousel [interval]="myInterval" [noWrap]="noWrapSlides"> 
      <slide *ngFor="let slidez of slides; let index=index" 
       [active]="slidez.active"> 
      <img class="img-fluid" [src]="slidez.image"> 

      <div class="carousel-caption"> 
       <h4>Slide {{index}}</h4> 

       <p>{{slidez.text}}</p> 
      </div> 
      </slide> 
     </carousel> 
    </div> 
</div> 

我也試過兩個「中心塊」和「IMG響應」從引導3類，但沒有骰子。有任何想法嗎？

Answer 1

原來，引導4不贊成"text-center"。相反，我用"text-lg-center"是這樣的...

<carousel class="text-lg-center" [interval]="myInterval" [noWrap]="noWrapSlides"> 

Answer 2

只需添加center-block類

圖像元素：

<img class="img-fluid" [src]="slidez.image"> 

，它應該工作。

如果這沒有幫助，你可能會在別的地方弄點亂七八糟的東西。

不是嘗試使用下面的代碼來重現一個新項目：

app.component.ts

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


@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'] 
}) 
export class AppComponent { 
    title = 'app works!'; 

    public myInterval:number = 5000; 
    public noWrapSlides:boolean = false; 
    public slides:Array<any> = []; 

    public constructor() { 
    for (let i = 0; i < 4; i++) { 
     this.addSlide(); 
    } 
    } 

    public addSlide():void { 
    let newWidth = 600 + this.slides.length + 1; 
    this.slides.push({ 
     image: `//placekitten.com/${newWidth}/300`, 
     text: `${['More', 'Extra', 'Lots of', 'Surplus'][this.slides.length % 4]} 
     ${['Cats', 'Kittys', 'Felines', 'Cutes'][this.slides.length % 4]}` 
    }); 
    } 

    public removeSlide(index:number):void { 
    this.slides.splice(index, 1); 
    } 
} 

app.component.html

<h1> 
    {{title}} 
</h1> 
<alert type="success">hello</alert> 

<div class="row"> 
    <div class="col-md-12"> 
     <carousel [interval]="myInterval" [noWrap]="noWrapSlides"> 
      <slide *ngFor="let slidez of slides; let index=index" 
       [active]="slidez.active"> 
      <img class="img-fluid center-block" [src]="'http://www.planwallpaper.com/static/cache/00/b7/00b7a21d94164cb8764457a894063606.jpg'"> 

      <div class="carousel-caption"> 
       <h4>Slide </h4> 

       <p>SOme text</p> 
      </div> 
      </slide> 
     </carousel> 
    </div> 
</div> 

應用.module.ts

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core'; 
import { FormsModule } from '@angular/forms'; 
import { HttpModule } from '@angular/http'; 
import { AlertModule } from 'ng2-bootstrap/ng2-bootstrap'; 
import { CarouselModule } from 'ng2-bootstrap/ng2-bootstrap'; 
import { AppComponent } from './app.component'; 

@NgModule({ 
    declarations: [ 
    AppComponent 
    ], 
    imports: [ 
    BrowserModule, 
    FormsModule, 
    HttpModule, 
    AlertModule, 
    CarouselModule 
    ], 
    providers: [], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { } 

我使用angular-cli beta.19-3和包ng2-bootstrap：

"ng2-bootstrap": "^1.1.16", 
"bootstrap": "^3.3.7", 

我真的希望這將如何對你有所幫助。

祝你好運。

Answer 3

設置的空白：汽車到.item類。