Bootstrap嵌入式視頻和div相同的高度

我使用bootstrap，我想有一個嵌入的視頻和div並排高度相同。試着在SO上發佈了不同的解決方案，但無法讓他們工作。Bootstrap嵌入式視頻和div相同的高度

HTML & CSS是這樣的：

header { 
 
\t background: url("../img/header.jpg"); 
 
\t background-size: cover; 
 
\t min-height: 595px; 
 
\t font-family: Myriad Pro; 
 
\t color: #FFF; 
 
\t text-align: center; 
 
\t font-weight: bold; 
 
\t padding-top: 60px; 
 
} 
 

 
.headerForm { 
 
\t background-color: rgba(0, 0, 0, 0.6); 
 
\t border-radius: 8px; 
 
\t margin-top: 25px; 
 
\t padding: 25px; 
 
\t text-align: left; 
 
\t height: 100%; 
 
} 
 

 
.form { 
 
\t color: #fff; 
 
\t text-align: center; 
 
\t width: 100%; 
 
} 
 

 
.form input { 
 
\t color: #a5a5a5; 
 
\t margin-right: 5px; 
 
\t margin-top: 10px; 
 
} 
 

 
.headerVideo { 
 
\t border: 10px #FFF solid; 
 
\t border-radius: 8px; 
 
\t margin-top: 25px; 
 
\t margin-bottom: 25px; 
 
}

<div class="container-fluid"> 
 
\t <div class="row"> 
 
\t \t <div> 
 
\t \t \t <header> 
 
\t \t \t \t <h2>Title</h2> 
 
\t \t \t \t <small>Slogan</small> 
 
\t \t \t \t <br> 
 
\t \t \t \t <div class="col-sm-6"> 
 
\t \t \t \t \t <div class="headerForm"> 
 
\t \t \t \t \t \t <h3> 
 
\t \t \t \t \t \t \t Be contacted by a and receive 
 
\t \t \t \t \t \t \t updates about the new . 
 
\t \t \t \t \t \t </h3> 
 
\t \t \t \t \t \t <small class="form"> 
 
\t \t \t \t \t \t \t Sign up for information about , events, 
 
\t \t \t \t \t \t \t demonstrations and more. 
 
\t \t \t \t \t \t </small> 
 
\t \t \t \t \t \t <form action="#" class="form"> 
 
\t \t \t \t \t \t \t <input type="text" name="firstname" value="Etunimi"> 
 
\t \t \t \t \t \t \t <input type="text" name="lastname" value="Sukunimi"> 
 
\t \t \t \t \t \t \t <input type="email" name="email" value="Sähköposti"> 
 
\t \t \t \t \t \t \t <input type="phone" name="phone" value="Puhelinnumero"> 
 
\t \t \t \t \t \t \t <input type="text" name="address" value="Osoite"> 
 
\t \t \t \t \t \t \t <input type="text" name="postal" value="Postinumero"> 
 
\t \t \t \t \t \t \t <br> 
 
\t \t \t \t \t \t \t <input type="submit" value="Submit"> 
 
\t \t \t \t \t \t </form> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </div> 
 
\t \t \t \t <div class="col-md-6"> 
 
\t \t \t \t \t <div class="headerVideo embed-responsive embed-responsive-16by9"> 
 
\t \t \t \t \t \t <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/gkTb9GP9lVI" allowfullscreen></iframe> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </div> 
 
\t \t \t </header> 
 
\t \t </div> 
 
\t </div> 
 
</div>

這裏是如何在瀏覽器中顯示： demo

那紅色的矩形有顯示沒有被格怎麼左側有與右分區相同的高度。我希望他們永遠都是同一個高度。任何幫助表示讚賞！

來源

2015-10-16 mpak

對此的答案很明顯。爲.headerVideo和.headerForm以及固定邊距添加了固定高度。

.headerVideo { 
    border: 10px #FFF solid; 
    border-radius: 8px; 
    margin-top: 25px; 
    margin-bottom: 25px; 
    height: 300px; 
} 

.headerForm { 
    background-color: rgba(0, 0, 0, 0.6); 
    border-radius: 8px; 
    margin-bottom: 25px; 
    padding: 25px; 
    text-align: left; 
    height: 300px; 
}

來源

2015-10-28 16:52:27 mpak

您有padding: 25px;在.headerform但margin-bottom: 25px;在.headerVideo。儘量做到這一點

.headerForm { 
    background-color: rgba(0, 0, 0, 0.6); 
    border-radius: 8px; 
    margin-top: 25px; 
    margin-bottom: 25px; 
    text-align: left; 
    height: 100%; 
}

來源

2015-10-16 18:56:48 scaisEdge

Bootstrap嵌入式視頻和div相同的高度

回答

相關問題