bootstrap 3傳送帶固定高度

請參閱Bootstrap 3中同一個傳送帶的以下兩張屏幕截圖，其中包含不同尺寸的圖像。bootstrap 3傳送帶固定高度

首先截圖： enter image description here 二截圖：

的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，增加了對轉盤固定寬度（或高度），但我不覺得這是一個很好的解決方案，因爲

自定義CSS
這不是響應，它應該保持col-md-6排隊的一半！

那麼有沒有人知道解決這個問題的優雅，健壯和響應的方式？也許用Javascript？

備註我知道那裏還有其他的輪播，但暗示這不是我的問題的答案。我的問題解決了bootstrap的傳送帶。

來源

2015-04-02 QuantumHive

你有沒有找到一個好的解決方案？我有同樣的問題@QuantumHive – caffeinescript 2016-03-02 02:49:26

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

我改變了CSS從

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

到：

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

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

來源

2015-04-02 09:40:51 Goerp

我知道這一點，因爲我已經在我的問題中表明，這不是一個理想的答案。這意味着在每個設備上，轉盤將具有這個高度。它需要有響應。除此之外，我正在尋找一種通用的解決方案來徹底解決Bootstrap輪播的問題。 – QuantumHive 2015-04-02 10:18:09

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

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

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

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

來源

2015-04-02 11:37:27 Bart

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

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

來源

2016-06-14 08:14:04 hackmajor

然後，您的圖像可以使用高度％來保持相對於新div容器大小的大小。 – hackmajor 2016-06-14 08:22:17

bootstrap 3傳送帶固定高度

回答

相關問題