Bootstrap：如何制作具有相同高度的左右容器？ [复制]
Posted
技术标签:
【中文标题】Bootstrap：如何制作具有相同高度的左右容器？ [复制]【英文标题】：Bootstrap: how to make left and right containers with same height? [duplicate] 【发布时间】：2018-03-22 19:48:05 【问题描述】：代码：
#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>如您所见，左容器和右容器具有不同的高度。谁能给我一些关于使它们具有相同高度的建议？
【问题讨论】：
用min-height怎么样？
你可以试试***.com/questions/3275850/…
【参考方案1】：
只需在包装父级上声明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>【讨论】：
【参考方案2】：获取左边div的高度；我猜那是#left div；并将其分配给一个变量。
var setHeight = $("#left").height();
然后你可以使用 jQuery 获取正确的 div 并使用变量分配内容高度。
$("#right").height(setHeight);
就这么简单。最终代码将如下所示。
var setHeight = $("#left").height();
$("#right").height(setHeight);
【讨论】：
哎呀，老实说，当您可以轻松完成时，我不会使用基于 JS 的解决方案（或基于 jQuery 的解决方案，这意味着您必须加载整个框架的开销）display: table 或 display: flex.
@Terry 你已经为 boostrap 加载了 jQuery。
确实如此，但仅仅因为您可以使用 JS 解决基本布局问题并不意味着您应该这样做。例如，您的代码没有考虑调整视口大小或容器父级大小的可能性。 JS 的问题在于它不是一种反应式语言，因此对于这样一个非常基本的功能，意味着必须附加很多事件侦听器才能使其工作。【参考方案3】：
你应该给他们一个额外的ID并添加
display: flex;
到那个id
【讨论】：
以上是关于Bootstrap：如何制作具有相同高度的左右容器？ [复制]的主要内容，如果未能解决你的问题，请参考以下文章
Bootstrap：如何获得具有 100% 高度的另一列的列