Question

我正在尝试将电话号码设置在图片下方缩略图的底部。这也是允许所有三个排队的。我尝试过固定位置和底部位置，但都没有工作。

<div class="row text-center hidden-sm hidden-xs" style="position:fixed; top:50%; left:5%; right:5%;">
            <div class="col-md-4">
                <div class="thumbnail" style="height:150px">
                    <img style="widht: 150px; height:100px" src="assets/logos/virgin-media.jpg">
                    <p><span style="color:#428BCA; font-size: 32px; bottom:50px">0871 703 7323</span></p>
                </div>
            </div>
            <div class="col-md-4">
                <div class="thumbnail" style="height:150px">                
                    <img style="width:150px; height100px" src="assets/logos/talktalk.jpg">  
                    <p><span style="color:#428BCA; font-size: 32px; bottom:50px">08082 230 624</span></p>              
                </div>
            </div>
            <div class="col-md-4">
                <div class="thumbnail" style="height:150px">                
                    <img style="width:150px; height100px" src="assets/logos/bt.png">
                    <p><span style="color:#428BCA; font-size: 32px; bottom:50px">0871 703 7196</span></p>
                </div>
            </div>
        </div>

我也做了一个bootply

http://www.bootply.com/PXayrqx4xx

Answer 1

好的，这是一个带有一些额外规则的固定版本：

#thumbs .thumbnail{
    text-align:center;
    position:relative;
}
#thumbs .thumbnail p{
    position:absolute;
    bottom:0;
    width:100%;
    margin:0;
    padding:0;
}

Bootply here

获取位于缩略图底部的电话号码

1 个答案: