html - Bootstrap，如何以正确的方式将标题与缩略图中图像的右侧对齐，以及如何将按钮与标题的底部对齐？

如标题中所述，我正在使用Bootstrap v3.3.2创建网站。

第一个问题是我正在使用网格系统将标题与缩略图的右侧对齐，如下所示：

<div class="container">

    <div class="thumbnail">

        <div class="row">

            <div class="col-md-6">

                <a href="#">

                    <img class="img-responsive" src="images/pic.jpg">

                </a>

            </div>

            <div class="col-md-6">

                <div class="caption">

                    <h2>Title</h2>

                    <hr>

                    <p>A design specification provides explicit information about the requirements for a product and how the product is to be put together. It is the most traditional kind of specification, having been used historically in public contracting for buildings, highways, and other public works, and represents the kind of thinking in which architects and engineers have been trained.</p>

                    <hr>

                    <p class="caption-footer">

                        <a href="#" class="btn"><span class="glyphicon glyphicon-heart"></span> Like it</a>

                        <a href="#" class="btn"><span class="glyphicon glyphicon-share"></span> Share it</a>

                    </p>

                </div>

            </div>

        </div>

    </div>

</div>

事实证明是这样的：



如所注意到的，图像左侧有很大的空白，这是不理想的。当我调整屏幕大小时，它变得更加不可取，两边都有很大的余量，如下所示：



我认为这可能是由于网格系统引起的，因为col-md-6具有固定的宽度。但是，我不知道该如何解决。

第二个问题是，我试图通过添加一个称为caption-footer的新类来将两个按钮与标题的底部对齐。但是，这不起作用。

以下是我的CSS文件，用于class caption-footer及其结果：

caption-footer{
  position: absolute;
  bottom:0;
  left: 0;
}

我在这里检查了很多链接（例如：link1 link2）。但是它们似乎都不适合我的情况。

在此先感谢您的帮助！

最佳答案

您可以做的一件事就是简单地将标题放在col-md-12 div下，将按钮放在另一col-md-12 div下。

<div class="container">
  <div class="row">
    <div class="col-md-6">
      <a href="pulpitrock.jpg" class="thumbnail">
        <p>Pulpit Rock: A famous tourist attraction in Forsand, Ryfylke, Norway.</p>
        <img src="pulpitrock.jpg" alt="Pulpit Rock" width="284" height="213">
      </a>
    </div>
    <div class="col-md-6">
      <div class="col-md-12">
           A design specification provides explicit information about the requirements for a product and how the product is to be put together. It is the most traditional kind of specification, having been used historically in public contracting for buildings, highways, and other public works, and represents the kind of thinking in which architects and engineers have been trained.
      </div>
      <div class="col-md-12">
               <a href="#" class="btn btn-primary">Download</a>
               <a href="#" class="btn btn-info">Images</a>
      </div>
    </div>
  </div>
</div>