Bootstrap旋转木马图像无法正确alignment

请看下面的图片，我们使用bootstrap旋转木马来旋转图像。 但是，当窗口宽度较大时，图像不能正确alignment边框。

但是bootstrap提供的carousel例子总是工作正常，不pipe窗口的宽度如何。 遵循代码。

有人能解释为什么旋转木马行为有所不同吗？ 这是否与图像大小或一些引导configuration丢失？

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

Answer 1

解决方法是把这个CSS代码放到你的自定义的css文件中

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

Answer 2

使用bootstrap 3，只需添加响应式和中心类：

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

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

编辑：

使用bootstrap 4，只需添加img-fluid类

 <img class="img-fluid" src="img/....jpg"> 

Answer 3

我遇到了同样的问题，并通过这种方式解决了问题：可以将非图像内容插入Carousel，以便我们可以使用它。 你应该首先插入div.inner-item （你将使中心alignment），然后在这个div内插入图像。

这是我的代码（Ruby）：

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

Answer 4

虽然vekozlov的答案可以在Bootstrap 3中对图像进行中心处理，但是当旋转木马缩小时，它将会中断：图像保留其大小，而不是随着旋转木马缩小。

相反，在顶层轮播div上执行此操作：

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

这将中心整个旋转木马，并防止它超出你的图像的宽度（即900像素或任何你想要设置）。 但是，当传送带缩小时，图像随之缩小。

当然，你应该把这个样式信息放在你的CSS / LESS文件中。

Answer 5

我想我有一个解决scheme：

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

在顶部的div上创build一个额外的单独的“class”，用跨度占用空间…（如下所示）

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

不用触摸bootstrap.css，在自己的样式表中，调用“carousel”（或者您select的任何标签）来匹配原始图片的宽度和高度！

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

}

所以在我的情况下，我正在使用小型320×200图像传送带。 bootstrap.css中可能有预设的尺寸，但我不喜欢改变，所以我可以尝试保持最新的版本。 希望这有助于~~

Answer 6

这可能与你的风格有关。 在我的情况下，我在父项“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> 

Answer 7

你的图片的宽度是否与span6完全相同？ 在我的情况下，不同的图像尺寸，我把高度属性放在我的图像，以确保他们都是相同的高度，旋转木马不调整图像之间的大小。

在你的情况下，尝试设置一个高度，这样的高度和旋转木马内部div的宽度之间的比例是相同的aspectRatio图像

Answer 8

理查兹的解决scheme没有奏效。 现在在bootstrap.css中，原来的代码已经变成这样了。

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

@ rnaka530的代码将打破引导的stream动特征。

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

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

Answer 9

对于旋转木马，我相信所有的图像必须是完全一样的高度和宽度。

此外，当你从bootstrap引用脚手架页面，我很确定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

Answer 10

把这个插入你的传送带所在的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]; } 

Answer 11

我面对同样的问题与你。 根据@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; } 

Answer 12

尝试这个

  .item img{ max-height: 300px; margin: auto; }