Question

我想使用Bootstrap 3在Bootstrap中使列元素具有动态生成的行中最高元素的高度。

例如在此页面中： http://jsfiddle.net/kLa0jqrz/2/

<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div id="LegendWell" class="well">
  <div id="LegendDiv" class="row">
    <div class="col-sm-6 col-md-4">
      <div style="width:100%;padding:8px;margin-bottom:8px;margin-top:8px;border-style:solid;border-width:4px;">
        <strong>Title 1</strong><br>
        Line 0<br/>
        Line 1<br/>
        Line 2<br/>
        Line 3<br/>
      </div>
    </div>
  <div class="col-sm-6 col-md-4">
    <div style="width:100%;padding:8px;margin-bottom:8px;margin-top:8px;border-style:solid;border-width:4px;">
      <strong>Title 2</strong><br/>
      Line 0<br/>
      Line 1<br/>
      Line 2<br/>
    </div>
  </div>
  <div class="col-sm-6 col-md-4">
    <div style="width:100%;padding:8px;margin-bottom:8px;margin-top:8px;border-style:solid;border-width:4px;">
      <strong>Title 3</strong><br/>
      Line 0<br/>
      Line 1<br/>
    </div>
  </div>
  <div class="col-sm-6 col-md-4">
    <div style="width:100%;padding:8px;margin-bottom:8px;margin-top:8px;border-style:solid;border-width:4px;">
      <strong>Title 4</strong><br/>
      Line 0<br/>
      Line 1<br/>
      Line 2<br/>
    </div>
  </div>
  <div class="col-sm-6 col-md-4">
    <div style="width:100%;padding:8px;margin-bottom:8px;margin-top:8px;border-style:solid;border-width:4px;">
      <strong>Title 5</strong><br/>
      Line 0<br/>
      Line 1<br/>
      Line 2<br/>
      Line 3<br/>
      Line 4<br/>
      Line 5<br/>
    </div>
  </div>
</div>
</body>

这将创建不同高度的div，其中一些高度位于同一列中，浪费其他列中的空间，同时看起来也很糟糕。

我宁愿在同一响应式创建的行中将div设置为相同的高度，以便它们对齐。

在BS3中有一种方法吗？

编辑：显然，这是重复的。

但是答案建议在行中使用display: table，在列中使用display: table-cell。

如http://jsfiddle.net/kLa0jqrz/3/中所示，此操作无效。另一个建议是使用flexbox。但是我想坚持使用Bootstrap 3。

Bootstrap 3将行中的拉伸元素拉伸到相同大小

0 个答案: