Bootstrap 嵌入视频且 div 高度相同

Question

我正在使用 bootstrap，并且我想要一个嵌入式视频和 div 并排放置且高度相同。尝试过在 SO 上发布的不同解决方案，但无法使它们中的任何一个起作用。

HTML & CSS 是这样的：

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

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

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

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

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

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

这是它在浏览器中的显示方式：

那里的红色矩形显示左 div 与右 div 的高度不同。我希望它们始终保持相同的高度。感谢您的帮助！

Answer 1

您在 .headerform 中有 padding: 25px;，但在 .headerVideo 中有 margin-bottom: 25px;。尝试对两者都做同样的事情

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

Answer 2

答案很明显。为 .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;
}

Bootstrap 嵌入视频且 div 高度相同

Bootstrap embedded video and div same height

html

height

embedded-video