繁体   English   中英

Bootstrap,如何以正确的方式将标题与缩略图中图像的右侧对齐,并使按钮与标题的底部对齐?

[英]Bootstrap, how to align the caption to the right of the image within the thumbnail in a right way and align the button to the bottom of the caption?

如标题中所述,我正在使用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>

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM