Question

我正在尝试使用Bootstrap 3开发一个缩略图，它在悬停时显示两个按钮。像这样：

在我的设计中，图标没有显示出来。问题是什么？

enter image description here

我也可以使用glyphicons。我希望一个按钮有链接图标，另一个按钮有一个更多按钮。

HTML部分：

<div class="col-md-3 col-sm-6 col-xs-12">
           <div class="thumbnail">
              <img src="images/Layer26.png" alt="" class="img-responsive">
              <div class="caption">
                 <!-- Start Caption -->
                 <div class="btn-group btn-trigger">
                    <a href="#" class="btn btn-default web-link">Link</a>
                    <a href="#" class="btn btn-default more-info">More</a>                                        
                 </div>
              </div>
              <!-- End Caption -->                  
           </div>
           <h5 class="text-center">Artist Name, city</h5>
        </div>
     </div>

CSS：

    .Latestsignup .caption .btn-trigger{
    text-align:center;
    position:absolute;
    top:40%;
    left:30%;
}

.Latestsignup .caption .btn-trigger a{
    width:44px;
    height:44px;
    text-indent:-9999px;
    background: transparent;
    border:1px solid white;
}

.Latestsignup .caption .btn-trigger .web-link {
    background:url(images/external_link.png) no-repeat;
}

HTML / CSS和Bootstrap文件为here，网站托管为here。

我希望我的设计看起来像这样：

enter image description here

目前的情况如下：

enter image description here

显然我将不得不覆盖一些bootstrap css属性。我该怎么做才能减少图像之间的距离？我的目标是什么CSS属性？

我需要两排之间的距离。即使我缩小尺寸，我希望在连续的行中有距离。标题（艺术家姓名＃，城市）几乎位于两个图像的中间。我希望它始终倾向于上部图像（如在原始设计中）。这应该怎么做？

enter image description here

HTML / CSS files为here，网站托管为here。

实施ANONYMOUSXXX提议的更改：

这是小提琴：http://jsbin.com/zekazumogixi/2/

即使在悬停时，也不显示链接和更多按钮：

enter image description here

我跟着这个小提琴：http://jsbin.com/monokivutodu/1/edit

我在哪里弄错了？

Answer 1

我在jsfiddle上测试过，它很好http://jsfiddle.net/fauzi/pLuzpLfo/

注意：因为您的图标很大并且您想在链接上使用它作为背景，请尝试使用背景大小来减小图标大小

.Latestsignup .caption .btn-trigger .web-link {
    background:url(images/external_link.png) no-repeat right 7px center;
    background-size: 25px 25px;
}

我不知道为什么googledrive没有调用web-link样式（看看inspect元素）。

请问，为什么你不使用fontawesome获取链接上的图标？例如：http://jsfiddle.net/fauzi/3tkz3g9a/

对于＆＃34的按钮;立即加入＆＃34;你可以使用这个元素

 <div class="container join-now">
     <div class="row">
          <p class="text-center">
              <button type="button" class="btn btn-default btn-lg">Join Now</button>
          </p>
 </div></div>

css：

.container.join-now {
    margin-top:20px;
}

如果您想将自己的风格用于图标，请尝试使用

.thumbnail{
    position:relative;
    height:200px;
    min-width:200px;
    width:auto;
    border:none;
}

.text-center span.text-caption{
    width:200px;
}

.caption{
    opacity:0;
    display:block;
    position:absolute;
    top:0;
    width:100%;
    height:100%;
    background:rgba(221,171,149,0.6);
    -webkit-transition: opacity 0.5 ease-in-out;    
}

.thumbnail:hover .caption{
    opacity:1;
}

.Latestsignup {
    position:relative;
    padding:40px;

}

.Latestsignup .caption .btn-trigger{
    text-align:center;
    position:absolute;
    top:50%;
    left:50%;
    margin-left:-44px;
    margin-top:-25px;
}

.Latestsignup .caption .btn-trigger a{
    width:44px;
    height:44px;
    text-indent:-9999px;
    background: transparent;
    border:1px solid white;
}

.Latestsignup .caption .btn-trigger .web-link {
    background:url(https://33ed600debf998b723a30a8a8013d39c1939389e.googledrive.com/host/0B0byAC8kZZPhd0J1ekNSNnBUamc/images/external_link.png) no-repeat right 7px center;
    background-size: 25px 25px;
}
.container.join-now {
    margin-top:20px;
}

jsfiddle with your icon

如果你想使用fontawesome，试试这个

.thumbnail{
    position:relative;
    height:200px;
    min-width:200px;
    width:auto;
    border:none;
}

.text-center span.text-caption{
    width:200px;
}

.caption{
    opacity:0;
    display:block;
    position:absolute;
    top:0;
    width:100%;
    height:100%;
    background:rgba(221,171,149,0.6);
    -webkit-transition: opacity 0.5 ease-in-out;    
}

.thumbnail:hover .caption{
    opacity:1;
}

.Latestsignup {
    position:relative;
    padding:40px;

}

.Latestsignup .caption .btn-trigger{
    text-align:center;
    position:absolute;
    top:50%;
    left:50%;
    margin-left:-44px;
    margin-top:-25px;
}

.Latestsignup .caption .btn-trigger a{
    width:44px;
    background: transparent;
    border:1px solid white;
}

.container.join-now {
    margin-top:20px;
}

jsfiddle with fontawesome

无法在Bootstrap按钮上添加Icon并在两个Bootstrap行之间添加空格

1 个答案: