1
我有一個row Bootstrap列col-sm-4和col-sm-8。在col-sm-4只有文字信息。在col-sm-8有一個旋轉木馬與圖像，你可以看到here。如何將一個傳送帶放在一個容器旁邊的另一個塊中，同時保持兩個容器的高度相同？
我想讓我的旋轉木馬適合列（col-sm-8），以便頁面調整大小時，旋轉木馬不會縮小到列/行的高度以下。
我的問題不是重複的，因爲我的列不是固定高度，如果我向左列添加更多文本，它會增加大小，右邊將匹配其高度，因爲我的.div-equalheightfix CSS，但是div內的Carousel在小於一定大小時收縮太小。
這些圖像說明我的意思：
當前
期望
這裏是代碼：
HTML
<div class="container" style="width:100%;background-color:#252525;">
<div class="row" style="display:table;">
<!-- text column (left) -->
<div class="col-xs-12 col-sm-4 div-equalheightfix div-aboutus">
<p>Text goes here.</p>
</div>
<!-- carousel column (right) -->
<div class="col-sm-8 hidden-xs div-equalheightfix">
<div id="myCarousel" class="carousel fade" data-ride="carousel">
<!-- indicators/buttons -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
</ol>
<!-- images -->
<div class="carousel-inner clickthrough" role="listbox">
<div class="item active">
<img src="images/fader/img001.jpg" class="carousel-img" data-no-retina>
</div>
<div class="item">
<img src="images/fader/img002.jpg" class="carousel-img" data-no-retina>
</div>
</div>
</div>
</div>
</div>
</div>
CSS
/* ensures that both columns are always equal height */
.div-equalheightfix {
float: none;
display: table-cell;
vertical-align: top;
}
/* carousel css */
.carousel.fade {
opacity: 1;
margin: auto -15px auto -15px;
}
.carousel.fade .item {
opacity: 0;
-moz-transition: opacity ease-in-out .7s;
-o-transition: opacity ease-in-out .7s;
-webkit-transition: opacity ease-in-out .7s;
transition: opacity ease-in-out .7s;
position: absolute;
display: block !important;
left: 0 !important;
top: 0
z-index: 1;
}
.carousel.fade .item:first-child {
top: auto;
position: relative;
}
.carousel.fade .item.active {
opacity: 1;
-moz-transition: opacity ease-in-out .7s;
-o-transition: opacity ease-in-out .7s;
-webkit-transition: opacity ease-in-out .7s;
transition: opacity ease-in-out .7s;
z-index: 2;
}
/* text-column CSS */
.div-aboutus {
padding: 2% 8% 6% 4%;
color: #F1F1F2;
line-height: 175%;
}
.carousel-img {
}
更新：我可以通過調整img元素改變圖像高度，但是我添加了一個類此.carousel-img。我不確定在那裏添加什麼內容以使高度自動與文本列的高度內聯，min-height:100%;使其與瀏覽器窗口的高度相同，而不是容器的高度。有什麼建議麼？
更新＃2：看到我的答案下面的替代解決方案，似乎更好的做到這一點，而不使用Bootstrap列;我編輯了標題以匹配。