如何将列内容放在底部？

debugcn 发表于 Dev

亚历克斯·史马科（Alex Shmatko）

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

<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>

图里奥·卡斯特罗（TúlioCastro）

问题在于带有float的元素没有固定的高度，因此您不能将其放置在底部。

这就是为什么您必须转换为表容器，而不是将列转换为表单元格以应用vertical-align：bottom的原因。参见下面的代码：

<!DOCTYPE html>
<html>

<head>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
  
  
		<style>
			.container {
				display: table;
				width: 100%;
			}
			
			.row{
				display:table-row;
			}
			
			.cell{
				display:table-cell;
				float:none;
			}
			
			.cell-bottom{
				vertical-align: bottom;
			}
		</style>
  
</head>

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

      <div class="col-xs-4 cell">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
        in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur
      </div>

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

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

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

      </div>

      <div class="col-xs-4 cell">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
        in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur
      </div>

    </div>

  </div>
</body>

</html>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。