html - 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 的新类将两个按钮对齐到标题的底部。但是，这不起作用。

下面是我的 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>