Question

我正在使用bootstrap框架。

<div class="container">
    <h1>Menu</h1>
    <div class="row">
        <div class="col-md-4">
            <a href="/link"><img src="images/placeholder-200x200.jpg" alt="Image" class="img-rounded center-block"></a>
            Step 1: Credit & Money
        </div>
        <div class="col-md-4">
            <a href="/link"><img src="images/placeholder-200x200.jpg" alt="Image" class="img-rounded center-block"></a>
            Step 1: Credit & Money
        </div>
        <div class="col-md-4">
            <a href="/link"><img src="images/placeholder-200x200.jpg" alt="Image" class="img-rounded center-block"></a>
            Step 1: Credit & Money
        </div>
    </div>
</div> <!-- /container -->

图像左侧和右侧的空白也是可点击的 - 看起来像.center-block是罪魁祸首。怎么解决？

Answer 1

一个块跨越整个div，并使用margin来居中。作为一个链接，我建议改为从图像中删除中心块，创建一个类：

.center {
    text-align: center;
}

并在包含div中设置该类，在您的情况下：

<div class="col-md-4 center">

或类似的东西。

另外，我建议将每个图像的文本描述放入div中，因为如果图像不是块，文本就会在它旁边流动。只需将文本放在段落标记中即可。

这是一个jsbin来演示：

http://jsbin.com/zamavoha/1/edit

可以使用href图像点击空白

1 个答案: