html - Bootstrap 列的高度相等不起作用

Question

我正在查看解决方案 here on SO 将 Bootstrap 行中的所有列设置为相同的高度。它在我的 fiddle 中运行良好，但在我的浏览器中与所有其他 css 没有使用 '.thumbnail.row.equalColumnHeight' css。有黑线穿过。我是 css 的新手，有没有办法覆盖这些黑线并让它在这个类中使用 css？

这是它在 Chrome 开发工具中的样子。

这是浏览器中的行 - 不等高。

这是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

要在 Bootstrap 中执行相同的 height 列，您需要遵循 this回答。只需将这段代码添加到您的 CSS 中:

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

.row{
  overflow: hidden; 
}