引導程序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。 我已經讀過為輪播添加固定寬度（或高度）的方法，但是我認為這並不是一個好的解決方案，因為

1. 自定義CSS
2. 它沒有響應，應該保持col-md-6為一行的一半！

那么，有誰知道解決此問題的優雅，魯棒且反應迅速的方法？ 也許使用Javascript？

注意我知道那里還有其他輪播，但是這並不是我的問題的答案。 我的問題是引導程序的輪播。

Answer 1

我只是在每個項目之前和之后添加一個div標簽。 添加的div標簽應嵌套在具有“ item”類的div標簽內。 然后，實際的輪播項目將嵌套在新添加的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的立場總是彼此相鄰，而“ display：table-cell”則不是。 如果他們需要更多空間（響應更快），它們將“向下移動”。 這是一個更合適的答案。

使它變得更好。 我建議您使用已經用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;
}

因此，如果您可以將圖像高度設置為固定值，則可以嘗試這樣做。