Question

要简短地解释一下，这就是我想要实现的目标：http://www.bootply.com/Muh7eahFC8#

响应式设计，有三列，每列底部有一个按钮。

问题在于我手动设置了列的高度，我希望整个事情能够自动适应三列中最长的内容。

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

@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;
  }
}

（试试不同的屏幕宽度）

我认为我想要实现的目标非常普遍。难道没有更聪明的方法来实现它吗？

- 编辑

借助@DavidG帮助我可以获得响应式解决方案：http://www.bootply.com/7C2WvyxNyZ 不幸的是，33％是硬编码的，如果我改变了我需要更新css的列数，我发现没有办法让每列中的按钮居中

Answer 1

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

.row {
    display: table;
}

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

然后通过几次调整，你可以强制将锚点固定在div的底部。

http://www.bootply.com/crLlXiiKqk

Bootstrap：将元素对齐到列的底部

1 个答案: