如何将列内容放在底部？

Question

我有一行有三列，其中一列有两个按钮。此按钮行应放在列的底部。问题是我该如何得到这个？提前谢谢。

JSFiddle

<div class="container">
    <div class="row">

        <div class="col-xs-4">
          I needed to insert some text to place it on multiple rows
        </div>

        <div class="col-xs-4">

          <a class="btn btn-default">
            Button
          </a>

          <a class="btn btn-default">
            Button
          </a>

        </div>

        <div class="col-xs-4">
          I needed to insert some text to place it on multiple rows
        </div>

    </div>

</div>

Answer 1

问题是浮动的元素没有固定的高度，所以你不能将它放在底部。

这就是为什么你必须转换成表容器，然后将列转换为table-cells以应用vertical-align：bottom。请看下面的代码：

public TEntity GetById(int id)
        {
            return _dbSet.Find(id);
        }

Answer 2

将此添加到您的CSS：

div.col-xs-4 { position:relative;}
div.col-xs-4 a.btn-default { position:absolute; bottom:0;}

然后剩下的就是将第一个按钮对齐左边，将第二个按钮对齐（给它们唯一的类或ID）：

div.col-xs-4 a.btn-default.left { left:0;}
div.col-xs-4 a.btn-default.right { right:0;}

希望有所帮助！