我正在为我的专栏使用 bootstrap 3,我试图将两列放在一起,左边的一列有大文本 h4 标题,右边的一列有小文本评论。
问题是在标题周围添加 h4 标签时,“1 条评论”位似乎跳到了它所在的 div 的顶部,我希望它与底部对齐。理想情况下,我希望它与 h4 对齐并向右对齐。
要显示的图片:
看到评论位比更大的标题文本高:(
<!-- main content -->
<div class="row">
<!-- Articles -->
<div class="col-md-9">
<!-- notification -->
<div class="alert alert-warning text-center">
<a href="/admin.php">You have <span class="badge badge-important">3</span> admin items needing review!</a>
</div>
<!-- new sales -->
<div class="alert alert-success text-center">
<strong>Latest Games On Sale:</strong> <a href="/sales/#86"><span class="label label-info">Steam</span> Sparkle 2 Evo</a>, <a href="/sales/#85"><span class="label label-info">Steam</span> Shadow Warrior Classic Redux</a>, <a href="/sales/#84"><span class="label label-info">Steam</span> Redshirt</a>, <a href="/sales/#83"><span class="label label-info">Steam</span> Gravity Badgers</a> - <a href="/sales/">See all</a>
</div>
<div id="maincontent">
<!-- Article -->
<div class="row">
<div class="col-md-8"><h4><a href="/articles/sdasd-asdasdasdasdasdasdasdasd.2121">Sdasd Asdasdasdasdasdasdasdasd</a></h4></div>
<div class="col-md-4"><p class="small muted"><a href="/articles/sdasd-asdasdasdasdasdasdasdasd.2121/#comments"><span class="glyphicon glyphicon-comment"></span> 1 Comments</a></p></div>
</div>
最佳答案
这是因为,在 Bootstrap 中有一个 <h4>
上边距为 10px
和一个 <p>
上边距为 0
.并不是说我容忍内联样式,但这应该让您了解如何绕过它:
<div class="row">
<div class="col-md-8">
<h4><a href="/articles/sdasd-asdasdasdasdasdasdasdasd.2121">Sdasd Asdasdasdasdasdasdasdasd</a></h4>
</div>
<div class="col-md-4">
<p class="small muted" style="margin-top:14px;"><a href="/articles/sdasd-asdasdasdasdasdasdasdasd.2121/#comments"><span class="glyphicon glyphicon-comment"></span> 1 Comments</a></p>
</div>
</div>
我用了14px
而不是 10px
以补偿字体大小的差异。我也是
关于javascript - 列中的文本不对齐,使用 bootstrap 3,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21446188/