【问题标题】:Align button element to bottom of div in bootstrap 3在引导程序 3 中将按钮元素与 div 的底部对齐
【发布时间】:2013-11-25 10:12:56
【问题描述】:

我有一个 php 页面,它从 mysql 数据库中提取数据并根据数据库内容生成引导网格,这是相当标准的东西。我有一个标题、图标、描述和链接,需要输出到 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 混合使用才能做到这一点,但很难找到最好的方法。

站点是一个内部站点,所以我不能直接链接到整个站点,但如果需要,我很乐意提供更多代码 sn-ps

谢谢

【问题讨论】:

    标签: jquery css twitter-bootstrap twitter-bootstrap-3


    【解决方案1】:

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

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

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

    【讨论】:

    • 感谢您的想法,但没有将按钮对齐到 div 的底部。我的想法是使用 jQuery 来获取最高列的高度,将其他 2 设置为相同的高度,然后使用类似 .bottomaligned {position:absolute; bottom:0; margin-bottom:7px; left: 0;} 的方式将按钮设置为位于列的绝对底部如果我使用上面的 CSS 代码确实有效,但我需要设置 Div 的高度 - 这就是我的设计混乱的原因,通过使用 jQuery,我希望得到一些更精简的东西
    猜你喜欢
    • 2020-07-26
    • 2015-03-08
    • 1970-01-01
    • 2019-12-15
    • 2014-03-09
    • 1970-01-01
    • 2021-04-20
    • 1970-01-01
    • 2016-10-31
    相关资源
    最近更新 更多