ng2-bootstrapカルーセル（ブートストラップ4）の画像をセンターに配置できません

Question

ng2ブートストラップカルーセルに画像を配置することができません。ブートストラップ4のドキュメントによると、img-fluidクラスを使うだけでよいはずです。私も「センター・ブロック」とブートストラップ3から「IMG応答」クラス、ないサイコロの両方を試してみた

<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 class="img-fluid" [src]="slidez.image"> 

は、ここに私の全体のdivです。何か案は？

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クラス。