Bootstrap，如何以正确的方式将缩略图内的图片右侧对齐，并将按钮对齐标题的底部？

Question

正如标题中所述，我正在使用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文件以及结果如何：

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

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

提前感谢您的帮助！

Answer 1

你可以做的一件事就是将标题放在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>