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

我在旋轉木馬上的瀏覽器中對CSS進行了快速而骯髒的更改。這是一個小小的改變，似乎在詭計中。

我改變了CSS從

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

到：

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

所以，如果你可以用圖像高度設置爲一個固定值居住，你可以試試。

Answer 2

問題不是圖像確實如你所要求的那樣不被接受的答案。

BootStrap中的Col- *聲明爲「float：left」，因此不會聽其兄弟的高度。這就是爲什麼傳送帶與桌子相比高度不同。

您可以做的是將父項和表的容器聲明爲「display：table-cell」，父項聲明爲「display：table;」。是的，與divs表格單元格。爲什麼不使用HTML表格呢。那麼，td的立場總是彼此相鄰，「display：table-cell」不是。如果他們需要更多空間（更具響應性），他們將「向下移動」。這是一個更合適的問題。

爲了讓它更好。我建議你使用已經用Col定義的行作爲子對象，然後按照上一節中的描述創建一個表。這樣做可以讓您的主要設計符合需要。

Answer 3

我只是在每個項目之前和之後添加一個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> 

則需要調整高度，以適應你的旋轉木馬最大的項目。而已。