html - Bootstrap:如何使左右容器的高度相同？

This question already has answers here:

How can I make Bootstrap columns all the same height?
（33个答案）
两年前关闭。
代码：

#left {
  background-color: rgba(255,0,0,0.3);
}

#right {
  background-color: rgba(0,255,0,0.3);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>

<body>
<div class="col-xs-3" id="left">
<p>short</p>
</div>
<div class="col-xs-3" id="right">
<p>long</p><p>long</p><p>long</p><p>long</p><p>long</p>
</div>
</body>

如您所见，左容器和右容器具有不同的高度。有人能给我一些建议，让他们有同样的高度吗？

最佳答案

只需在包装父级上声明display: flex即可。这意味着您必须将列包装成一个新的<div>，例如：

<div class="row row-equal-height">

  <div class="col-xs-3" id="left">
    <p>short</p>
  </div>
  <div class="col-xs-3" id="right">
    <p>long</p>
    <p>long</p>
    <p>long</p>
    <p>long</p>
    <p>long</p>
  </div>

</div>

对于CSS，您可以执行以下操作：

.row-equal-height {
    display: flex;
}

然而，这意味着您将不得不依赖browser support for CSS3 flexbox specification。好消息是，有了供应商的前缀，它今天得到了惊人的广泛支持（>97%）。
见以下概念证明：

#left {
  background-color: red;
}

#right {
  background-color: green;
}

.row-equal-height {
  display: flex;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>

<body>
  <div class="row row-equal-height">
    <div class="col-xs-3" id="left">
      <p>short</p>
    </div>
    <div class="col-xs-3" id="right">
      <p>long</p>
      <p>long</p>
      <p>long</p>
      <p>long</p>
      <p>long</p>
    </div>
  </div>
</body>

最后解决方案：display: table
您应该将此视为最后的解决方案，因为我们都知道，您不应该使用表进行布局。但是，如果您想支持根本不支持flexbox的浏览器（提示IE9及以下），这可能是您唯一的出路：

#left {
  background-color: red;
}

#right {
  background-color: green;
}

.wrapper {
  display: table;
  border-collapse: collapse;
  width: 50%;
}

.row {
  display: table-row;
}

.row > div {
  display: table-cell;
  float: none;
  width: 50%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>

<body>
  <div class="wrapper">
    <div class="row">
      <div class="col-xs-3" id="left">
        <p>short</p>
      </div>
      <div class="col-xs-3" id="right">
        <p>long</p>
        <p>long</p>
        <p>long</p>
        <p>long</p>
        <p>long</p>
      </div>
    </div>
  </div>
</body>

关于html - Bootstrap:如何使左右容器的高度相同？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/46683074/