角度ngx-bootstrap轮播未居中 [英] angular ngx-bootstrap carousel not centered

问题描述

我正在尝试使用ngx-bootstrap中的Carousel，但是布局与我期望的不一样.

I am trying to use Carousel from ngx-bootstrap, but the layout it's not as I expect.

我添加了一些样式CSS使其居中，但仍然无法正常工作，这是它的外观:

I added some style CSS to center it, but still it's not working, here is how it looks:

这是我在组件中的代码:

and here is my code in component:

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  styles: [`.carousel { margin:0px auto }`]
})
export class AppComponent {
  title = 'app';
}

这是我的HTML模板:

and here is my HTML template:

<carousel>
  <slide>
    <img src="assets/images/nature/5.jpeg" alt="First slide">
  </slide>
  <slide>
    <img src="assets/images/nature/6.jpeg" alt="Second slide">
  </slide>
  <slide>
    <img src="assets/images/nature/7.jpg" alt="Third slide">
  </slide>
</carousel>

谢谢您的帮助！

推荐答案

当我从以下位置更改时，它就起作用了:

It worked when I changed from:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet">

到版本3:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

在index.html

in the index.html

这篇关于角度ngx-bootstrap轮播未居中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！