使用引导程序使每列内的元素具有相同的高度

Posted 2023-03-06

【中文标题】使用引导程序使每列内的元素具有相同的高度

【英文标题】：Make the element inside each column to have same height using bootstrap

【发布时间】：2014-09-05 17:16:44

【问题描述】：

是否可以使用引导程序使橙色区域具有相同的高度，如下图1所示？即使里面的段落长度不同？我目前使用的结构如下，结果如图2所示。

    <div class="row">
      <div class="col-sm-12 col-md-4">
        <h3></h3>
        <p></p>
      </div>
      <div class="col-sm-12 col-md-4">
        <h3></h3>
        <p></p>
      </div>
      <div class="col-sm-12 col-md-4">
        <h3></h3>
        <p></p>
      </div>
  </div>

图1

图2

【参考方案1】：

你可以使用display: table-cell;试试这个bootply：

http://www.bootply.com/CYMv8o29K3

【讨论】：

这看起来不像@blake 要求的。

我要关闭标题，因为我看不到这里附加的图像。

【参考方案2】：

我会使用一个环绕 h3 标记的附加 div。您可以为此 div 分配最小或固定高度以达到所需的结果。

CSS

.orange 
   height: 200px;
       

HTML

 <div class="row">
      <div class="col-sm-12 col-md-4">
        <div class="orange">
          <h3></h3>
        </div>
        <p></p>
      </div>
      <div class="col-sm-12 col-md-4">
        <div class="orange">
          <h3></h3>
        </div>
        <p></p>
      </div>
      <div class="col-sm-12 col-md-4">
        <div class="orange">
          <h3></h3>
        </div>
        <p></p>
      </div>
  </div>

【参考方案3】：

您真正需要做的就是在橙色区域设置一个高度。这样的事情就可以解决问题。

Demo

.h3 
    height: 150px;                /* Your height goes here */
    background-color: orange;

【参考方案4】：

您可以通过不设置预定义的高度来获得灵活性（如果您的文本真的很长怎么办）。尝试使用map() 函数获取最高元素的高度，并将此高度用于同一类的所有元素。 DEMO

【参考方案5】：

刚刚找到了一个解决这个问题的jquery插件，所以不用在css中设置固定高度。 http://filamentgroup.com/examples/equalHeights/