我有 4 列的行,每列都有一个标题和一些文本。大多数列都有相似数量的文本,向下按列中的按钮以匹配其余列。然而,一列的文本较少,并且按钮按下得不够远。
有没有办法将按钮与行底部对齐?我想实现这一点并同时保持响应,因此当屏幕较小时它看起来像这样:
这是我刚才对页面的标记:
<div class="container">
<div class="row">
<div class="col-md-3">
<h2>Heading</h2>
<p>text here</p>
<p><a class="btn btn-default" href="#" role="button">View details >></a></p>
</div>
<div class="col-md-3">
<h2>Heading</h2>
<p>text here</p>
<p><a class="btn btn-default" href="#" role="button">View details >></a></p>
</div>
<div class="col-md-3">
<h2>Heading</h2>
<p>less text here</p>
<p><a class="btn btn-default more" href="#" role="button">View details >></a></p>
</div>
<div class="col-md-3">
<h2>Heading</h2>
<p>text here</p>
<p><a class="btn btn-default" href="#" role="button">View details >></a></p>
</div>
</div>
</div>
有几种方法可以做到这一点:
给容器一个固定的高度。这并不理想,因为为了让它看起来漂亮,您必须为每个断点设置不同的高度。
您还需要将按钮设置为position: absolute
, bottom: 0
并添加一些底部填充/边距。
使用一些 javascript 来匹配高度,例如匹配高度 http://brm.io/jquery-match-height/。您还需要像上一点一样设置位置。
添加额外的行并在 4 个新列内重复按钮。然后使用显示或隐藏原始按钮和新按钮引导响应类 http://getbootstrap.com/css/#responsive-utilities.
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)