96

请看下图，我们使用引导轮播来旋转图像。但是，当窗口宽度较大时，图像无法正确对齐边框。

但是，无论窗口的宽度如何，bootstrap 提供的轮播示例总是可以正常工作。按照代码。

有人可以解释为什么轮播的行为不同吗？这与图像大小或缺少某些引导配置有关吗？

<section id="carousel">
<div class="hero-unit span6 columns">
    <h2>Welcome to TACT !</h2>
    <div id="myCarousel" class="carousel  slide" >
      <!-- Carousel items -->
      <div class="carousel-inner">
        <div class="item  active" >
            <img alt=""  src="/eboxapps/img/3pp-1.png">
            <div class="carousel-caption">
                <h4>1. Need a 3rd party jar?</h4>
            </div>
        </div>
        <div class="item">
            <img alt=""  src="/eboxapps/img/3pp-2.png">
            <div class="carousel-caption">
                <h4>2. Create Request</h4>
            </div>
        </div>
        <div class="item">
            <img alt=""  src="/eboxapps/img/3pp-3.png">
            <div class="carousel-caption">
                <h4>3. What happens?</h4>
            </div>
        </div>
        <div class="item">
            <img alt=""  src="/eboxapps/img/3pp-4.png">
            <div class="carousel-caption">
                <h4>4. Status is Emailed</h4>
            </div>
        </div>
      </div>
      <!-- Carousel nav -->
      <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
      <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
    </div>
</div>

轮播图片

4

13 回答 13

162

解决方案是将此 CSS 代码放入您的自定义 CSS 文件中：

.carousel-inner > .item > img {
  margin: 0 auto;
}
于 2013-03-27T13:59:04.357 回答
128

使用 bootstrap 3，只需添加 responsive 和 center 类：

 <img class="img-responsive center-block" src="img/....jpg" alt="First slide">

这会自动调整图像大小，并使图片居中。

编辑：

使用引导程序 4，只需添加img-fluid类

<img class="img-fluid" src="img/....jpg">
于 2014-08-22T18:37:12.830 回答
18

我遇到了同样的问题，用这种方法解决了：可以将非图像内容插入到 Carousel 中，这样我们就可以使用它了。您应该首先插入div.inner-item（您将在其中进行中心对齐），然后在此 div 中插入图像。

这是我的代码（红宝石）：

<div id="myCarousel" class="carousel slide">
    <!-- Carousel items -->
    <div class="carousel-inner">
        <div class="active item">
            <%= image_tag "couples/1.jpg" %>
        </div> 
        <% (2..55).each do |t|%>
            <div class="item">
                <div class='inner-item'>
                    <%= image_tag "couples/#{t}.jpg" %>
                </div>
            </div> 
        <% end -%>
    </div>
    <!-- Carousel nav -->
    <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
    <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
</div>

还有我的 css 代码（.scss）：

.inner-item {
    text-align: center;
    img {
        margin: 0 auto;
    }
}
于 2012-12-17T23:07:53.910 回答
6

虽然vekozlov的答案将在 Bootstrap 3 中使您的图像居中，但当轮播按比例缩小时它会中断：图像保持其大小，而不是随着轮播按比例缩小。

相反，请在顶级 carousel 上执行此操作div：

<div id="my-carousel" class="carousel slide"
    style="max-width: 900px; margin: 0 auto">
    ...
</div>

这将使整个轮播居中，并防止它超出图像的宽度（即 900 像素或您想要设置的任何值）。然而，当轮播按比例缩小时，图像也会随之缩小。

当然，您应该将此样式信息放在您的 CSS/LESS 文件中。

于 2013-09-06T23:13:44.410 回答
5

在 Bootstrap 4 中，您可以将mx-auto类添加到您的img标签。

例如，如果您的图像宽度为 75%，则应如下所示：

<img class="d-block w-75 mx-auto" src="image.jpg" alt="First slide">

Bootstrap 将自动转换mx-auto为：

ml-auto, .mx-auto {
    margin-left: auto !important;
}

.mr-auto, .mx-auto {
    margin-right: auto !important;
}
于 2019-04-06T10:45:55.510 回答
1

我想我有一个解决方案：

在您的个人样式表页面中，指定宽度和高度以匹配您的图像尺寸。

在该顶部 div 上创建一个额外的单独“类”，以使用跨度来占用空间......（如下所示）

        <div class="span6 columns" class="carousel">
            <div id="myCarousel" class="carousel slide">
                <div class="carousel-inner">
                <div class="item active">

无需接触 bootstrap.css，在您自己的样式表中，调用“carousel”（或您选择的任何标签）以匹配原始像素的宽度和高度！

.carousel       {
            width: 320px;
            height: 200px;

}

因此，就我而言，我使用 320x200 的小图像进行轮播。bootstrap.css 中可能有预设尺寸，但我不喜欢更改它，因此我可以尝试与未来版本保持同步。希望这有帮助~~

于 2012-09-17T22:28:24.543 回答
1

这可能与你的风格有关。就我而言，我在父“项目” div 中使用了一个链接，所以我不得不更改我的样式表以说明以下内容：

.carousel .item a > img {
  display: block;
  line-height: 1;
}

在预先存在的 boostrap 代码下：

.carousel .item > img {
  display: block;
  line-height: 1;
}

我的图像看起来像：

<div class="active item" id="2"><a href="http://epdining.com/eats.php?place=TestRestaurant1"><img src="rimages/2.jpg"></a><div class="carousel-caption"><p>This restaurant is featured blah blah blah blah blah.</p></div></div>
于 2012-06-22T23:23:33.423 回答
1

您的图像是否具有与 span6 一样的 460px 宽度？在我的情况下，对于不同的图像尺寸，我在我的图像上放置了一个高度属性，以确保它们都是相同的高度，并且轮播不会在图像之间调整大小。

在您的情况下，尝试设置一个高度，以便此高度与轮播内部 div 的宽度之间的比率与图像的 aspectRatio 相同

于 2012-05-15T06:19:29.833 回答
1

尝试这个

    .item img{
      max-height: 300px;
      margin: auto;
    }
于 2016-06-28T14:18:16.740 回答
1

我和你面临同样的问题。根据@thuliha 的提示，以下代码解决了我的问题。

在该html文件中，修改为以下示例：

<img class="img-responsive center-block" src=".....png" alt="Third slide">

在 中carousel.css，修改类：

.carousel .item {
  text-align: center;
  height: 470px;
  background-color: #777;
}
于 2015-08-20T18:02:24.497 回答
0

对于轮播，我相信所有图像的高度和宽度都必须完全相同。

此外，当您从引导程序返回脚手架页面时，我很确定 span16 = 940px。考虑到这一点，我认为我们可以假设，如果您有

<div class="row">
     <div class="span4"> 
        <!--left content div guessing around 235px in width -->
     </div>
     <div class="span8">
        <!--right content div guessing around 470px in width -->
     </div>
</div>

所以是的，在一行内设置跨度空间时必须小心，因为如果图像宽度太大，它会将你的 div 发送到下一个“行”，这并不好玩：P

链接 1

于 2012-09-18T16:23:01.577 回答
0

将此插入到轮播所在的 css 父 div 类中。

<div class="parent_div">
     <div id="myCarousel" class="carousel slide">
            <div class="carousel-inner">
              <div class="item active">
                <img src="assets/img/slider_1.png" alt="">
                <div class="carousel-caption">
                </div>
              </div>
            </div>
     </div>      
</div>

CSS

.parent_div { 
margin: 0 auto;
min-width: [desired width];
max-width: [desired width];
}
于 2013-03-23T09:01:19.157 回答
0

@Art L. Richards 的解决方案没有奏效。现在在bootstrap.css中，原来的代码变成了这样。

.carousel .item > img {
  display: block;
  line-height: 1;
}

@rnaka530 的代码会破坏引导程序的流畅特性。

我没有一个好的解决方案，但我确实修复了它。我非常仔细地观察了引导程序的轮播示例http://twitter.github.com/bootstrap/javascript.html#carousel。

我发现 img 宽度必须大于网格宽度。在span9中，宽度最大为 870px，因此您必须准备一个大于 870px 的图像。如果您在 img 之外有更多容器，因为所有容器都有边框或边距，您可以使用宽度较小的图像。

于 2012-11-27T12:15:18.030 回答