无法在 ng2-bootstrap 旋转木马中居中图像 (bootstrap 4)

Question

我无法在 ng2-bootstrap 轮播中将图像居中。根据bootstrap 4的文档，我们应该只需要使用img-fluid class.

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

我也试过 "center-block" 和 "img-responsive" class 来自 bootstrap 3，但没有骰子。有什么想法吗？

Answer 1

只需将 center-block class 添加到

图像元素：

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

app.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 2

事实证明 Bootstrap 4 弃用 "text-center"。相反，我像这样使用 "text-lg-center"...

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

Answer 3

将 margin:auto 设置为 .item class。

无法在 ng2-bootstrap 旋转木马中居中图像 (bootstrap 4)

unable to center image in ng2-bootstrap carousel (bootstrap 4)

ng2-bootstrap

bootstrap-4

angular