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

  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#

最佳答案

解决了



版本1-仅使用CSS

尝试使用displaytabletable-celltable-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
  








使用jQuery的第2版

您可以使用小jQuery做到这一点

var maxHeight = 0;

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

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


jQuery Demo

jQuery Fulscreen

09-20 22:18