bootstrap 3轮播固定高度

Question

请参阅Bootstrap 3中相同轮播的以下两个屏幕截图，其中包含不同大小的图像。

第一个截图： 第二个截图：

内部轮播的Html。

<div class="carousel-inner" role="listbox">
    .
    .
    <div class="item">
        <img class="img-responsive center-block" src="...">
    </div>
    .
    .
</div>

轮播和表格都包含在class="row"中，并且都位于自己的class="col-md-6"内。

正如你所看到的那样，这是丑陋的，因为旋转木马不断变换高度与图像的不同高度。我不接受“你的源图像应该都具有相同的高度”作为答案。

我希望旋转木马具有固定的高度，图像应相应缩放（最好与桌子的高度相同）。如果可能的话，我想用提供的一个引导类来修复它，而不是添加自定义css。 我已经read为旋转木马添加固定的宽度（或高度），但我认为这不是一个好的解决方案，因为

1. 自定义css
2. 它没有响应，它应该保持col-md-6成为行的一半！

那么有谁知道一种优雅，强大且反应灵敏的方法来解决这个问题？也许用Javascript？

注意我知道还有其他旋转木马，但建议这不是我的问题的答案。我的问题是关于bootstrap的轮播。

Answer 1

我只是在每个项目之前和之后添加一个div标签。添加的div标签应嵌套在div标签内，该标签具有类＆＃34; item＆＃34;。然后，实际的轮播项目将嵌套在新添加的div标签内。以下是您的案例中的示例：

<div class="carousel-inner" role="listbox">
    .
    .
    <div class="item">
      <div class="container" style="display:block;width:100%;height:350px;overflow:hidden;">

        <img class="img-responsive center-block" src="..."><!-- actual item -->

      </div>
    </div>
    .
    .
</div>

您可以调整高度以适应旋转木马中最大的项目。那就是它。

Answer 2

问题不在于你所要求的图像，因为没有接受的答案。

BootStrap中的Col- *声明为“float：left”，因此不会监听其兄弟姐妹的高度。这就是为什么旋转木马与桌子相比具有不同的高度。

您可以做的是将轮播和表格的容器声明为“display：table-cell”，其父级声明为“display：table;”。是的，带有div的表格单元格。为什么不使用HTML表。好吧，td的立场总是彼此相邻，“显示：表格单元格”不是。如果他们需要更多空间（响应更快），他们将“向下移动”。这个问题更合适。

让它变得更好。我建议你使用你已经用Col作为子项定义的行，然后按照上一节中的描述创建一个表。这样做可以使您的主要设计根据需要做出响应。

Answer 3

我在浏览器的旋转木马上做了快速而又脏的css更改。这是一个小小的变化，似乎可以做到这一点。

我从

改变了一点css

.carousel-inner>.item>img, .carousel-inner>.item>a>img {
...
}

为：

.carousel-inner>.item>img, .carousel-inner>.item>a>img {
...
      height: 200px;
}

因此，如果您可以将图像高度设置为固定值，则可以尝试使用。