jquery - 将按钮元素与 Bootstrap 3 中的 div 底部对齐

标签 jquery css twitter-bootstrap twitter-bootstrap-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 底部对齐。

我找到了一些选项,但它们都涉及手动设置类的高度,对于那些描述比其他行更短的行来说,这看起来很奇怪。它还搞砸了响应式设计,而响应式设计是网站的最终目标

我假设我必须使用 jQuery 与一些 CSS 混合来做到这一点,但正在努力找出最好的方法。

网站是一个内部网站,因此我无法直接链接到整个网站,但很乐意在需要时提供更多代码片段

谢谢

最佳答案

对按钮使用相对定位,例如:

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

未经测试,但可能有帮助。

关于jquery - 将按钮元素与 Bootstrap 3 中的 div 底部对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19943131/

相关文章:

javascript - 无法弄清楚如何使用 AJAX 从 JSON 数据对象获取特定值

html - css position fixed 根本不起作用

html - 用内容扩展 div 宽度

html - 向正文顶部添加填充并不能解决导航栏覆盖内容的问题

javascript - 如何实现只选择一个 block ,而不是所有 block ?

javascript - jQuery使用div里面的css更新TD单元格的颜色

php - 在加载 ajax 的页面内无限滚动

javascript - 垂直拉伸(stretch)列表项

html - 如何垂直居中 Bootstrap 类按钮?

javascript - Bootstrap 警报链接,既关闭警报又访问该链接