javascript - 列中的文本不对齐，使用 bootstrap 3

Question

我正在为我的专栏使用 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>

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以补偿字体大小的差异。我也是