Question

我使用Bootstrap的Carousel组件。它被放置在网格系统内，只有一列（12个），跨越整个页面。但是，Carousel中嵌入的图片与左页面对齐，我希望它们居中。

我从Get Bootstrap网站复制并粘贴了基本模板，插入了只有一列的网格系统，并将Carousel放在其中，但图片总是左对齐。

Bootstrap是3.3.7，Ubuntu 16.04 LTS桌面，最新的Mozilla Firefox，新的Apache和MySQL。

相关代码如下。

<div class="row">
  <div class="col-md-12">
    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
      <!-- Indicators -->
      <ol class="carousel-indicators">
        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
        <li data-target="#carousel-example-generic" data-slide-to="1"></li>
        <li data-target="#carousel-example-generic" data-slide-to="2"></li>
      </ol>
      <!-- Wrapper for slides -->
      <div class="carousel-inner" role="listbox">
        <div class="item active">
          <img src="img/pic0.jpg" alt="Picture 0">
          <div class="carousel-caption">
            This is the Picture 0
          </div>
        </div>
        <div class="item">
          <img src="img/pic1.jpg" alt="Picture 1">
          <div class="carousel-caption">
            This is the Picture 1
          </div>
        </div>
        <div class="item">
          <img src="img/pic2.jpg" alt="Picture 2">
          <div class="carousel-caption">
            This is the Picture 2
          </div>
        </div>
      </div>

      <!-- Controls -->
      <!-- Default code from Get Bootstrap website -->

Answer 1

此问题是由于图像的大小造成的。

如果你制作100％宽度的图像，那么这个问题就会解决，所以请使用第一种方法。

如果您不想更改图像的宽度。如果您想将图像置于中心，请使用第二种方法。

方法1： - 在内部/外部样式表中添加此样式

.carousel-inner > .item > img, .carousel-inner > .item > a > img {
    width: 100%;
}

方法2： - 在内部/外部样式表中添加此样式

.carousel-inner > .item > img, .carousel-inner > .item > a > img {
    margin: 0 auto;
}

Bootstrap：使用Carousel时，图片与左页面对齐

1 个答案: