列中的文本没有排列，使用bootstrap 3

Question

我正在使用bootstrap 3作为我的列，我正在尝试将两个列放在一起，左边的列有一个大文本h4标题，右边一个列有一个小文本注释计数。

问题是当在标题周围添加h4标签时，“1 comments”位似乎跳到它所在的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>

Answer 1

这是因为，在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来补偿font-size的差异。我也