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>

我也尝试过bootstrap 3中的“center-block”和“img-responsive”类，但没有骰子。有什么想法吗？

Answer 1

只需将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>

<强> 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 to .item class。

无法将图像置于ng2-bootstrap轮播中心（bootstrap 4）

3 个答案: