Question

我正在尝试将两个锚点按钮彼此对齐，每个按钮下方都有文本。我在figcaption中这样做，因为只有当用户将鼠标悬停在图像上时才会显示按钮。但是我甚至没有接近。

这是我到目前为止所尝试的内容：

<div class="row cs-style-3">
   <div class="col-lg-4 gitem">

   </div>

    <div class="col-lg-4 gitem">
              <figure>
                  <img src="pictures/cover/book-2015.png" alt="">
                  <figcaption class="text-center">
                      <div class="row">
                          <a href="" class="btn btn-primary btn-lg"><span class="glyphicon glyphicon-download"></span>Download </a><br />
                          <p>PDF file</p>
                          <a href="" class="btn btn-success btn-lg"><span class="glyphicon glyphicon-download-alt"></span>Download</a>
                          <p>Zip file</p>
                      </div>
                  </figcaption>

              </figure>            
      </div>


   <div class="col-lg-4 gitem">

   </div>



</div><!-- end row -->

Answer 1

您可以将每个按钮和文本对放在一个自己的列中

<div class="row">
  <div class="col-lg-6">
     <a href="" class="btn btn-primary btn-lg"><span class="glyphicon glyphicon-download"></span>Download </a><br />
     <p>PDF file</p>
 </div>
 <div class="col-lg-6">
     <a href="" class="btn btn-success btn-lg"><span class="glyphicon glyphicon-download-alt"></span>Download</a>
     <p>Zip file</p>
 </div>
</div>

Answer 2

试试这段代码。如果我们也有你的css会更好。 http://jsfiddle.net/2s1g7oLe/

HTML

<div class="row cs-style-3">
<div class="col-lg-4 gitem"></div>
<div class="col-lg-4 gitem">
    <figure>
        <img src="http://jolka.qwqw.hu/tarhely/jolka/kepek/201406/konyvek10.png" alt="">
        <figcaption class="text-center" >
            <div class="row"> 
                <div class="col-sm-6">
                <a href="" class="btn btn-primary btn-lg"><span class="glyphicon glyphicon-download"></span>Download </a>

                <br />
                <p>PDF file</p> 
                </div>

                <div class="col-sm-6"><a href="" class="btn btn-success btn-lg"><span class="glyphicon glyphicon-download-alt"></span>Download</a>

                <p>Zip file</p>
                </div>
            </div>
        </figcaption>
    </figure>
</div>
<div class="col-lg-4 gitem"></div>
</div>
<!-- end row -->

简单的CSS

figcaption 
{
 display:none
}
figure  
{
text-align:center
}

figure:hover figcaption
{
display:block;
}

将Boostrap锚点按钮与FigCaption内部底部的文本对齐

2 个答案: