Равная высота для столбцов бутстрапа не работает

Question

Я смотрю на решение here on SO, чтобы установить все столбцы в строке начальной загрузки на равные высоты. Он отлично работает в моей скрипке, но в моем браузере со всеми другими css не используется CSS .thumbnail.row.equalColumnHeight 'css. Через него проходят черные линии. Я вроде как новичок в css, есть способ переопределить эти черные линии и заставить его использовать css для этого класса?

Вот что это похоже на инструменты Chrome dev.

здесь строка в браузере - не равные высоты.

Вот код в fiddle, где он показывает неравные высоты.

Вот код.

html, 
 
body, 
 
.container-fluid, 
 
.row { 
 
    height: 100%; 
 
} 
 
.row > div { 
 
    height: 100%; 
 
} 
 
.row .col-md-5 { 
 
    background-color: #eee; 
 
    top: 51px; 
 
    /*border: 1px solid black;*/ 
 
    height: calc(100% - 51px); 
 
    padding-left: 0; 
 
    padding-right: 0; 
 
} 
 
.row .col-md-7 { 
 
    background-color: #ddd; 
 
    top: 51px; 
 
    /*border: 1px solid black;*/ 
 
    height: calc(100% - 51px); 
 
    padding-left: 0; 
 
    padding-right: 0; 
 
} 
 
#googleResultMap { 
 
    width: 100%; 
 
    height: 100%; 
 
    /*border: 1px solid black;*/ 
 
} 
 
.searchFilter { 
 
    /*width:200px;*/ 
 
    height: 15%; 
 
    /*border: 1px solid blue;*/ 
 
} 
 
.searchResults { 
 
    height: 85%; 
 
    border: 1px solid green; 
 
    overflow-y: scroll 
 
} 
 
input[readonly].default-cursor { 
 
    cursor: default; 
 
    background-color: white; 
 
} 
 
.date-field { 
 
    width: 120px; 
 
} 
 
@@media only screen and (max-width:768px) { 
 
    /* only size 'xs' and below */ 
 
    .searchResults { 
 
    height: 100%; 
 
    } 
 
} 
 
.thumbnail .col-lg-3 { 
 
    border: 1px solid red; 
 
} 
 
.searchResults { 
 
    height: 85%; 
 
    border: 1px solid green; 
 
    overflow-y: scroll 
 
} 
 
.thumbnail.row { 
 
    height: auto; 
 
} 
 
.cborder { 
 
    border: 1px solid pink; 
 
} 
 
.imageColumn { 
 
    padding-right: 0; 
 
    padding-left: 0; 
 
} 
 
.thumbnail.row.equalColumnHeight { 
 
    display: -webkit-box; 
 
    display: -webkit-flex; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
}

<div class="container-fluid"> 
 
    <div class="row"> 
 
    <div class="col-lg-5 col-md-5 col-sm-5 hidden-xs"> 
 
     @*Sidebar*@ 
 
     <div id="googleResultMap"></div> 
 
    </div> 
 
    <div class="col-lg-7 col-md-7 col-sm-7 col-xs-12"> 
 
     @*Body content*@ 
 
     <div class="searchFilter col-lg-12 col-md-12 col-sm-12 hidden-xs"> 
 
     @Html.TextBoxFor(model => model.ClassDate, "{0:MM/dd/yyyy}", new { @class = "date-field form-control default-cursor", @readonly = "readonly" }) @Html.Hidden("classTime") 
 
     <br/>Time Filter 
 
     <br/>Open Classes Only 
 
     </div> 
 
     @* 
 
     <div class="searchResults col-lg-12 col-xs-12 col-sm-12">*@ 
 
     <div class="searchResults col-lg-12 col-xs-12 col-sm-12"> 
 
      <div class="thumbnail row equalColumnHeight"> 
 
      <div class="col-lg-3 col-xs-3 imageColumn"> 
 
       @* 
 
       <h3>Thumbnail label</h3> 
 
       <p> 
 
       <a class="btn btn-primary" role="button" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample"> 
 
           Link 
 
          </a>Test Data 
 
       </p>*@ 
 
       <img src="http://www.joomlaworks.net/images/demos/galleries/abstract/7.jpg" class="img-responsive center-block" alt="Responsive image" style="width: 100%; border: 1px solid purple;"> 
 
       <img src="http://www.joomlaworks.net/images/demos/galleries/abstract/7.jpg" class="img-responsive center-block" alt="Responsive image" style="width: 100%; border: 1px solid purple;"> 
 
       <img src="http://www.joomlaworks.net/images/demos/galleries/abstract/7.jpg" class="img-responsive center-block" alt="Responsive image" style="width: 100%; border: 1px solid purple;"> 
 
      </div> 
 
      <div class="col-lg-3 col-xs-3" style="text-align: center;"> 
 
       @* 
 
       <h3>Thumbnail label</h3> 
 
       <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>*@ 
 
       <i class="fa fa-users fa-5x" style="margin: auto;"></i> 
 
      </div> 
 
      <div class="col-lg-3 col-xs-3" style="text-align: center;"> 
 
       @* 
 
       <h3>Thumbnail label</h3> 
 
       <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>*@ 
 
       <i class="fa fa-user fa-5x" style="margin: auto;"></i> 
 
      </div> 
 
      <div class="col-lg-3 col-xs-3"> 
 
       @* 
 
       <h3>Thumbnail label</h3> 
 
       <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>*@ 
 
      </div> 
 

 
      <div class="collapse cborder" id="collapseExample"> 
 
       <div class="well"> 
 
       test data 
 
       <br />test data 
 
       <br />test data 
 
       <br /> 
 
       </div> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     @*</div>*@ 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

Чтобы сделать такие же height столбцы в Bootstrap вам нужно следовать this ответ. Просто добавьте этот код в свой CSS:

.row [class*="col-"]{ 
    margin-bottom: -99999px; 
    padding-bottom: 99999px; 
} 

.row{ 
    overflow: hidden; 
}