twitter bootstrap：将元素对齐到底部

Question

我有一个三列布局，每个都有一个按钮，我想在底部，在每一列的相同高度，如下所示：

  col1 header       col2 header       col3 header  
content content   content content   content content
content content   content content   content content
content content   content content   content content
content content                     content content
content content                     content content
                                    content content
                                    content content

   <button>          <button>          <button>    

根据内容最长的列，我希望三个按钮在底部对齐。

我的HTML看起来像这样：

<div class="col-md-4">
  <h2>col1 header</h2>
  <p>content [...]</p>
  <p class="text-center">
    <a href="#" class="btn btn-primary">button</a>
  </p>
</div>
<div class="col-md-4">
  <h2>col1 header</h2>
  <p>content [...]</p>
  <p class="text-center">
    <a href="#" class="btn btn-primary">button</a>
  </p>
</div>
<div class="col-md-4">
  <h2>col1 header</h2>
  <p>content [...]</p>
  <p class="text-center">
    <a href="#" class="btn btn-primary">button</a>
  </p>
</div>

更多关于这一点是响应性的，所以当缩小每一列的显示器时，只显示一个在另一列之下。

任何人都可以提供一些提示吗？

- 看看这个相关的问题：Bootstrap: align elements to bottom of column

我找到的解决方案：http://www.bootply.com/mSxIMFgHSi#

Answer 1

解决了它

---

版本1 - 仅使用css

尝试使用display：table，table-cell和table-row

only css demo

only css fullscreen

<强> CSS

    .wrapper {
        display:table;
        border-collapse:collapse;
    }
    .wrap {
        display:table-row;
    }
    .item {
        display:table-cell;
        border: 1px solid #ccc;
        padding-bottom:50px;
        position:relative;
    }
    a.btn{
        position:absolute;
        bottom:10px;
        left:40%;
    }

---

请参阅此说明（如果图像不可读，请保存此图像）

---

  

参考博客

     

  
• Equal height boxes with CSS
  
• Fluid Width Equal Height Columns
  

---

---

版本2使用jquery

你可以使用小jQuery

来做到这一点

var maxHeight = 0;

$("div").each(function(){
   if ($(this).height() > maxHeight) { maxHeight = $(this).height(); }
});

$("div").height(maxHeight);

jQuery Demo

jQuery Fulscreen