logo标签列表

在Bootstrap 3中将按钮元素对齐到div底部

jquerycsstwitter-bootstraptwitter-bootstrap-3
3

我有一个PHP页面，从MySQL数据库中提取数据，并根据数据库内容生成基于Bootstrap的网格，这是相当标准的操作。我需要在3列网格中输出标题、图标、描述和链接。

代码简化如下：

<div class="col-lg-4 col-md-4">
  <h2 class="text-center"><?php echo $row['title'] ?></h2>
  <img src="<?php echo $row['icon']; ?>" width="64" height="64" class="icons">
  <p><?php echo $row['description'] ?></p>
  <p><a class="btn btn-info btn-lg btn-block" href="<?php echo $row['link'] ?>" target="_blank">Download <?php echo $row['title'] ?></a></p>
 </div>

由于描述可能长达2行或20行，我希望能够根据该行中最长的描述将按钮对齐到div的底部。我找到了一些选项，但它们都涉及手动设置类的高度，这在那些具有较短描述的行中看起来很奇怪。它还破坏了响应式设计，这是该网站的最终目标。我假设我需要使用混合了一些CSS的jQuery来实现这一点，但难以确定最佳方法。该网站是内部网站，因此无法直接链接到整个网站，但如果需要，我很乐意提供更多代码片段。谢谢。
1个回答
0

使用相对定位来放置按钮，例如：

p a.btn {
  position: relative;
  bottom:5px;
}

没有测试过，但可能会有帮助。

谢谢您的建议，但是它并没有将按钮对齐到div的底部。我的想法是使用jQuery获取最高列的高度，将其他两个设置为相同的高度，然后使用类似于.bottomaligned {position:absolute; bottom:0; margin-bottom:7px; left: 0;}的东西来将按钮设置在列的绝对底部。 如果我使用上面的CSS代码，它确实可以工作，但我需要设置Div的高度-这就是我的设计出现问题的原因，通过使用jQuery，我希望能够得到更简洁的解决方案。 - Luke
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接