引导：将元素对齐到列的底部 [英] Bootstrap: align elements to bottom of column

问题描述

要简单解释一下，这就是我要实现的： http：// www .bootply.com / Muh7eahFC8＃

一个自适应的设计，有三列，每列底部有一个按钮。

问题是我手动设置列的高度，我想整个事情自动适应三列的最长内容。

现在，我根据每个视口的大小设置不同的高度：

  @media only screen and（min-width：992px）{
 div {
 height：180px; 
} 
 div a {
 position：absolute; 
 bottom：-40px; 
} 
} 
 
 @media只有屏幕和（min-width：1200px）{
 div {
 height：140px; 
} 
} 
  

（在不同的屏幕宽度上试用） / p>

我想我想要实现的是很常见的。

- 编辑

使用@DavidG帮助我可以fin an responsive solution： http://www.bootply.com/7C2WvyxNyZ
不幸的是，如果我更改列数，我必须更新css，并且我发现无法将每个列中的按钮中心

解决方案

不记得我从哪里获取此代码段，但这会使您的列的高度相同：

  .row {
 display：table; 
} 
 
 [class * =col-] {
 float：none; 
 display：table-cell; 
 vertical-align：top; 
} 
  

然后通过几个调整，你可以强制锚点被固定

http：// www。 bootply.com/crLlXiiKqk

To explain it in a short way, this is what I'm trying to achieve: http://www.bootply.com/Muh7eahFC8#

A responsive design, with three columns, and a button at the bottom of each column.

The problem is that I'm setting the height of the columns manually, and I'd like the whole thing to automatically adapt to the longest content of the three column.

Right now, I'm setting a different height based on the size of each viewport:

@media only screen and (min-width : 992px) {
  div {
    height: 180px;
  }
  div a {
    position: absolute;
    bottom: -40px;
  }
}

@media only screen and (min-width : 1200px) {
  div {
    height: 140px;
  }
}

(Give it a try on different screen width)

I think that what I'm trying to achieve is pretty common. Isn't there a smarter wayt to achieve it?

-- edit

With @DavidG help I could fins a responsive solution: http://www.bootply.com/7C2WvyxNyZ unfortunately hte 33% is hardcoded, if I change the number of columns I'll have to update the css, and I found NO WAY to center the buttons in each column

解决方案

Can't remember where I got this snippet from but this will make your columns the same height:

.row {
    display: table;
}

[class*="col-"] {
    float: none;
    display: table-cell;
    vertical-align: top;
}

Then with a couple of tweaks, you can force the anchors to be fixed to the bottom of the div.

http://www.bootply.com/crLlXiiKqk

这篇关于引导：将元素对齐到列的底部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！