如何在 bootstrap.js 中保留包装的同时使一些列的高度相同？

Question

例如，我有一个 3 列布局，例如：

并希望使中间列的高度与其他两个中最大的列（整行高度）相同。我还希望它能够在它变得太小时时换行，因为它可以处理那部分完美的现在：

Here is a fiddle 这将允许您调整大小并查看实际问题。

<div class="panel panel-default">
<h2 class="panel-heading">Example</h2>
<div class="container-fluid row vertical-align code-bg" style="padding: 0px;">
<div class="col-xs-12 col-md-5 col-lg-5"><code><a class="keyword" href="#functions__return_type">function</a> <a class="name" href="#functions__function_name">foo</a>(<a class="name" href="#functions__argument_name">data</a>) {
    <span class="type">return</span> (<span class="name">data</span> != undefined ? <a class="name" href="#functions__return_value">data</a> : <a class="string" href="#functions__return_value">'no data'</a>);
}</code></div>
<div class="col-xs-12 col-md-2 col-lg-1 text-center" style="background-color: #3B3B3B;">equivalent to</div>
<div class="col-xs-12 col-md-5 col-lg-6"><code><a class="flag" href="#functions__security">insecure</a> <a class="flag" href="#functions__access">public</a> <a class="flag" href="#functions__affinity">local</a> <a class="flag" href="#functions__extent">dynamic</a> <a class="flag" href="#functions__synchronization">sync</a> <a class="type" href="#functions__return_type">string</a> <a class="name" href="#functions__function_name">foo</a>(<a class="flag" href="#functions__argument_optionality">optional</a> <a class="type" href="#functions__argument_type">string</a> <a class="name" href="#functions__argument_name">data</a> = <a class="string" href="#functions__argument_default_value">'no data'</a>) {
    <span class="type">return</span> (<a class="name" href="#functions__return_value">data</a>);
}</code></div>
</div>
</div>

Answer 1

我看到你已经开始使用 flexbox 了！ 我在下面的小提琴中对此进行了扩展：

https://jsfiddle.net/opxr7pow/16/

所以每个列 div 也是 display: flex; 并将 align-items: center; 样式移动到这些而不是行上（它阻止了列全高）。 然后必须使用justify-content: center; 将中间列居中对齐，因为text-align: center; 不起作用。我不知道为什么会这样:(

请使用上面的 JSFiddle，因为代码 sn-p 看起来有点乱..

body {
  background-color: #181818;
  color: #A9B7C6;
  font-family: "Courier New", Courier, monospace;
  border: 0px;
  margin: 0px;
  padding: 0px;
}
code {
  background-color: #2B2B2B;
  color: #A9B7C6;
  display: block;
  font-family: "Courier New", Courier, monospace;
  font-size: 16px;
  margin: 0px;
  padding: 20px;
  white-space: pre-wrap;
}
code:after {
  content: " ";
}
.code-bg {
  background-color: #2B2B2B;
  margin-left: 0px;
  margin-right: 0px;
}
h1 {
  font-size: 32px;
  margin: 0px;
}
h1 > a:hover {
  text-decoration: none;
}
h2 {
  font-size: 24px;
  margin: 0px;
}
h2 > a:hover {
  text-decoration: none;
}
h3 {
  font-size: 20px;
  margin: 0px;
}
h3 > a:hover {
  text-decoration: none;
}
h4 {
  font-size: 16px;
  margin: 0px;
}
h4 > a:hover {
  text-decoration: none;
}
.list > li {
  white-space: pre-wrap;
}
p {
  margin: 0px;
  white-space: pre-wrap;
}
.text-center {
  text-align:center;
  justify-content: center;
}
.vertical-align {
  display: flex;
  flex-wrap: wrap;
}
.vertical-align > div {
  align-items:center;
  display: flex;
}

<script src="https://bootswatch.com/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<link href="https://bootswatch.com/slate/bootstrap.css" rel="stylesheet"/>

<div class="panel panel-default">
<h2 class="panel-heading">Example</h2>
<div class="container-fluid row vertical-align code-bg" style="padding: 0px;">
<div class="col-xs-12 col-md-5 col-lg-5"><code><a class="keyword" href="#functions__return_type">function</a> <a class="name" href="#functions__function_name">foo</a>(<a class="name" href="#functions__argument_name">data</a>) {
    <span class="type">return</span> (<span class="name">data</span> != undefined ? <a class="name" href="#functions__return_value">data</a> : <a class="string" href="#functions__return_value">'no data'</a>);
}</code></div>
<div class="col-xs-12 col-md-2 col-lg-1 text-center" style="background-color: #3B3B3B;">equivalent to</div>
<div class="col-xs-12 col-md-5 col-lg-6"><code><a class="flag" href="#functions__security">insecure</a> <a class="flag" href="#functions__access">public</a> <a class="flag" href="#functions__affinity">local</a> <a class="flag" href="#functions__extent">dynamic</a> <a class="flag" href="#functions__synchronization">sync</a> <a class="type" href="#functions__return_type">string</a> <a class="name" href="#functions__function_name">foo</a>(<a class="flag" href="#functions__argument_optionality">optional</a> <a class="type" href="#functions__argument_type">string</a> <a class="name" href="#functions__argument_name">data</a> = <a class="string" href="#functions__argument_default_value">'no data'</a>) {
    <span class="type">return</span> (<a class="name" href="#functions__return_value">data</a>);
}</code></div>
</div>
</div>