ブートストラップグリッドレイアウトの問題は - 同じ高さに設定されているグリッドレイアウトで

Question

すべての私の項目を意図したとおりに動作しませんが、私はまだこの問題があります。

<!-- featured-box --> 
<div class="featured-box"> 

    <div class="col-md-4 col-sm-4 col-xs-6"> 
     <div class="video-box featured-event-box"> 

      <div class="row"> 
       <div class="col-md-4"> 
        <div class="featured-event-image-box"> 
         <a href="#"><img src="images/featured-event-01.jpg" class="img-responsive transparent-onhover" /></a> 
        </div> 
       </div> 

       <div class="col-md-8"> 
        <p>20th Jan 2016</p> 
        <h4 class="featured-event-heading truncate"><a href="#" title="Lorem ipsum dolor sit amet">Lorem ipsum dolor sit amet</a></h4> 
        <p class="truncate-multiple" title="Nemore praesent an eam. Duo an partem possim. Sit posse euismod ad, pro no lorem melius dissentiet. Ius novum detracto in, vim volumus reprehendunt ei, cum ut oporteat delicatissimi.">Nemore praesent an eam. Duo an partem possim. Sit posse euismod ad, pro no lorem melius dissentiet. Ius novum detracto in, vim volumus reprehendunt ei, cum ut oporteat delicatissimi.</p> 
       </div> 
      </div> 

     </div> 
    </div> 

    <div class="col-md-4 col-sm-4 col-xs-6"> 
     <div class="video-box"> 
      <!-- 16:9 aspect ratio --> 
      <div class="embed-responsive embed-responsive-16by9"> 
       <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/qYv5R_e5hTM" frameborder="0" allowfullscreen></iframe> 
      </div> 
     </div> 
    </div> 

    <div class="col-md-4 col-sm-4 col-xs-6"> 
     <div class="video-box featured-event-box"> 

      <div class="row"> 
       <div class="col-md-4"> 
        <div class="featured-event-image-box"> 
         <a href="#"><img src="images/featured-event-01.jpg" class="img-responsive transparent-onhover" /></a> 
        </div> 
       </div> 

       <div class="col-md-8"> 
        <p>20th Jan 2016</p> 
        <h4 class="featured-event-heading truncate"><a href="#" title="Lorem ipsum dolor sit amet">Lorem ipsum dolor sit amet</a></h4> 
        <p class="truncate-multiple" title="Nemore praesent an eam. Duo an partem possim. Sit posse euismod ad, pro no lorem melius dissentiet. Ius novum detracto in, vim volumus reprehendunt ei, cum ut oporteat delicatissimi.">Nemore praesent an eam. Duo an partem possim. Sit posse euismod ad, pro no lorem melius dissentiet. Ius novum detracto in, vim volumus reprehendunt ei, cum ut oporteat delicatissimi.</p> 
       </div> 
      </div> 

     </div> 
    </div> 

    <div class="col-md-4 col-sm-4 col-xs-6"> 
     <div class="video-box"> 
      <!-- 16:9 aspect ratio --> 
      <div class="embed-responsive embed-responsive-16by9"> 
       <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/feQ99SuGdsw" frameborder="0" allowfullscreen></iframe> 
      </div> 
     </div> 
    </div> 

    <div class="col-md-4 col-sm-4 col-xs-6"> 
     <div class="video-box featured-event-box"> 

      <div class="row"> 
       <div class="col-md-4"> 
        <div class="featured-event-image-box"> 
         <a href="#"><img src="images/featured-event-01.jpg" class="img-responsive transparent-onhover" /></a> 
        </div> 
       </div> 

       <div class="col-md-8"> 
        <p>20th Jan 2016</p> 
        <h4 class="featured-event-heading truncate"><a href="#" title="Lorem ipsum dolor sit amet">Lorem ipsum dolor sit amet</a></h4> 
        <p class="truncate-multiple" title="Nemore praesent an eam. Duo an partem possim. Sit posse euismod ad, pro no lorem melius dissentiet. Ius novum detracto in, vim volumus reprehendunt ei, cum ut oporteat delicatissimi.">Nemore praesent an eam. Duo an partem possim. Sit posse euismod ad, pro no lorem melius dissentiet. Ius novum detracto in, vim volumus reprehendunt ei, cum ut oporteat delicatissimi.</p> 
       </div> 
      </div> 

     </div> 
    </div> 

    <div class="col-md-4 col-sm-4 col-xs-6"> 
     <div class="video-box"> 
      <!-- 16:9 aspect ratio --> 
      <div class="embed-responsive embed-responsive-16by9"> 
       <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/r_KEWddTrVc" frameborder="0" allowfullscreen></iframe> 
      </div> 
     </div> 
    </div> 

</div> 
<!-- featured-box --> 

CSS：

を

.featured-heading-box { 
    padding: 0 15px; 
} 

.featured-heading { 
    font-size: 20px; 
    padding: 0 0 15px 0; 
    border-bottom: 1px solid #b2b2b2; 
} 

.video-box { 
    padding: 15px 0 15px 0; 
    /*border: 1px solid red;*/ 
} 

/** 
* https://css-tricks.com/snippets/css/css-box-shadow/#article-header-id-1 
*/ 
.featured-event-box { 
    padding: 15px; 
    margin: 15px 0 15px 0; 
    min-height: 196px; 
    overflow: hidden; 
    border: 1px solid #e6e6e6; 
    background-color: #f9f9f9; 
    -moz-box-shadow: inset 0 0 10px #e6e6e6; 
    -webkit-box-shadow: inset 0 0 10px #e6e6e6; 
    box-shadow:   inset 0 0 10px #e6e6e6; 
} 

.featured-event-image-box { 
    margin-bottom: 15px; 
} 

.featured-event-heading a { 
    font-size: 14px; 
    color: inherit; 
} 

.featured-event-heading a:hover { 
    text-decoration: none; 
    color: #888; 
} 

なぜ、どのように修正できますか？

Answer 1

あなたは、グリッド内の列を使用しようとしている場合は、行の中の列を持っている必要があります：

<div class="row"> 
    <div class="col-md-4"> 
      stuff 
    </div> 
    <div class="col-md-4"> 
      more stuff 
    </div> 
</div>