[英]Using Bootstrap - How to make 2 rows, each with two horizontal columns, have the same height while staying responsive
[英]How to make two columns the same height and responsive
我試圖使兩個引導程序列具有相同的高度和響應速度。 到目前為止,我的兩列高度相同,但是隨着屏幕尺寸變小,一列比另一列短。 像這樣:
為了創建這兩列,我使用了Bootstrap 3。
我的HTML:
<div class="col-md-6">
<div class="col-md-12 pb-20">
<div class="btn-container">
<img src="http://via.placeholder.com/1200x500" alt="Snow" style="max-height: 500px;">
<button class="btn">BREAKFAST MENU</button>
</div>
</div>
<!--
-->
<div class="col-md-12 pb-20">
<div class="btn-container">
<img src="http://via.placeholder.com/1200x500" alt="Snow" style="max-height: 500px;">
<button class="btn">DRINKS MENU</button>
</div>
</div>
</div>
<!--
-->
<div class="col-md-6 hard--right">
<div id="carousel-example" class="carousel slide" data-ride="carousel" style="width:100%;">
<ol class="carousel-indicators">
<li data-target="#carousel-example" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example" data-slide-to="1"></li>
<li data-target="#carousel-example" data-slide-to="2"></li>
<li data-target="#carousel-example" data-slide-to="3"></li>
<li data-target="#carousel-example" data-slide-to="4"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="http://via.placeholder.com/1200x1200" alt="" style="max-height: 1020px; width:100%">
</div>
<div class="item">
<img src="http://via.placeholder.com/1200x1200" style="max-height: 1020px; width:100%" style="width:100%" alt="Second slide" />
</div>
<div class="item">
<img src="http://via.placeholder.com/1200x1200" style="max-height: 1020px; width:100%" alt="Third slide" />
</div>
<div class="item">
<img src="http://via.placeholder.com/1200x1200" style="max-height: 1020px; width:100%" alt="Fourth slide" />
</div>
<div class="item">
<img src="http://via.placeholder.com/1200x1200" style="max-height: 1020px; width:100%" alt="Fifth slide" />
</div>
</div>
<div class="main-text hidden-xs">
<div class="text-center">
<button class="btn">MAIN MENU</button>
</div>
</div>
</div>
</div>
我的問題的Codepen是https://codepen.io/mrsalami/pen/dKpdXO
圖片的width: 100%
,因此,在調整屏幕尺寸時,它們會根據父級的寬度(為屏幕寬度尺寸的50%)減小寬度。
這也導致圖像的高度也根據其原始寬高比進行調整。
因此,如果滿足以下條件,這將起作用:
右圖的高度=(左圖的高度* 2)+間距。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.