如何创建相同高度的Bootstrap列（左边那个的高度）

Question

我已经检查了关于这个主题的几个答案，但它们要么没有响应，要么就是不适合我。

我有两列，我希望右边一列始终与左边一列的高度相匹配。如果右栏中的内容太多，请使其可滚动。这可能吗？

Answer 1

我有一个例子给你（使用 table 布局）：

HTML:

<div class="row no-gutter">
  <div class="row-same-height">
    <div class="col-xs-6 col-xs-height">
      <div class="content-left">
        <img src="http://www.gettyimages.in/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg" class="img-responsive">
      </div>
    </div>
    <div class="col-xs-6 col-xs-height col-top">
      <div class="content-right">
        <div class="content-box">
          <h2>Responsive two sections (equal height)</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
            irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
         </div>
      </div>
    </div>
  </div>
</div>

CSS:

.no-gutter.row {
  margin-left: 0;
  margin-right: 0;
}
.no-gutter > [class*="col-"],
.no-gutter .row-same-height > [class*="col-"] {
  padding-right: 0;
  padding-left: 0;
}
@media (min-width: 992px) {
  .no-gutter-desktop.row {
    margin-left: 0;
    margin-right: 0;
  }
  .no-gutter-desktop > [class*="col-"],
  .no-gutter .row-same-height > [class*="col-"] {
    padding-right: 0;
    padding-left: 0;
  }
}
.inside {
  margin-top: 20px;
  margin-bottom: 20px;
  background: #ededed;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f4f4f4), color-stop(100%, #ededed));
  background: -moz-linear-gradient(top, #f4f4f4 0%, #ededed 100%);
  background: -ms-linear-gradient(top, #f4f4f4 0%, #ededed 100%);
}
.inside-full-height {
  height: 100%;
  margin-top: 0;
  margin-bottom: 0;
}
.content {
  padding: 12px 3px;
}
.row-height {
  display: table;
  table-layout: fixed;
  height: 100%;
  width: 100%;
}

.col-height {
  display: table-cell;
  float: none;
  height: 100%;
}
.col-top {
  vertical-align: top;
}
.col-middle {
  vertical-align: middle;
}
.col-bottom {
  vertical-align: bottom;
}
@media (min-width: 480px) {
  .row-xs-height {
    display: table;
    table-layout: fixed;
    height: 100%;
    width: 100%;
  }
  .col-xs-height {
    display: table-cell;
    float: none;
    height: 100%;
  }
  .col-xs-top {
    vertical-align: top;
  }
  .col-xs-middle {
    vertical-align: middle;
  }
  .col-xs-bottom {
    vertical-align: bottom;
  }
}
@media (min-width: 768px) {
  .row-sm-height {
    display: table;
    table-layout: fixed;
    height: 100%;
    width: 100%;
  }
  .col-sm-height {
    display: table-cell;
    float: none;
    height: 100%;
  }
  .col-sm-top {
    vertical-align: top;
  }
  .col-sm-middle {
    vertical-align: middle;
  }
  .col-sm-bottom {
    vertical-align: bottom;
  }
}
@media (min-width: 992px) {
  .row-md-height {
    display: table;
    table-layout: fixed;
    height: 100%;
    width: 100%;
  }
  .col-md-height {
    display: table-cell;
    float: none;
    height: 100%;
  }
  .col-md-top {
    vertical-align: top;
  }
  .col-md-middle {
    vertical-align: middle;
  }
  .col-md-bottom {
    vertical-align: bottom;
  }
}

@media (min-width: 1200px) {
  .row-lg-height {
    display: table;
    table-layout: fixed;
    height: 100%;
    width: 100%;
  }
  .col-lg-height {
    display: table-cell;
    float: none;
    height: 100%;
  }
  .col-lg-top {
    vertical-align: top;
  }
  .col-lg-middle {
    vertical-align: middle;
  }
  .col-lg-bottom {
    vertical-align: bottom;
  }
}
[class*="col-"] {
  background: #d6ec94;
}
.content-right {
  overflow-y: auto;
}

JS:

var leftHeight = $('.content-left').height();
$('.right').css('max-height', leftHeight);

$(window).resize(function () {
  var leftHeight = $('.content-left').height();
  $('.content-right').css('max-height', leftHeight);
});

如何创建相同高度的Bootstrap列（左边那个的高度）

How to create Bootstrap columns of the same height (the height of the left one)

html

css

dynamic-columns

twitter-bootstrap-3

CODEPEN