Question

编辑：想出来，底部的解释

我有一个缩略图图库链接到更大的图像。我正在使用bootstrap 3.

有些图像没有填满整个列，每张图像之间有不同的空间（但是引导程序正确对齐它们）。出于某种原因，额外的空间是“可点击的”。我希望只有图像可以点击。我该怎么做？

代码的相关部分从<div class="row">开始。

<body>
{% include "gallery_navbar.html" %}
<div class="tab-content">
  {% for pane_name, reddit_posts in reddit_posts_by_pane.items %}
    {% if pane_name == "food"  %}
      <div role="tabpanel" id="{{ pane_name }}" class="tab-pane active">
    {% else %}
      <div role="tabpanel" id="{{ pane_name }}" class="tab-pane">
    {% endif %}
    {% if reddit_posts %}
      <div class="row">
        {% for reddit_post in reddit_posts %}
          <div class="col-lg-4 col-sm-4 col-xs-6">
            <a data-rel="prettyPhoto[asd]" title="Image {{ reddit_post.rank }}" href="{{ reddit_post.submitted_link }}" style="display:block; height:100%; width:100%;">
              <img class="thumbnail center-block" data-src="{{ reddit_post.submitted_link }}">
            </a>
          </div>
        {% endfor %}
      </div><!--end row-->
    {% endif %}
  </div><!-- end tab-pane-->
  {% endfor %}
</div><!--end tab-content-->

编辑：额外的水平链接空间随display: inline-block消失，但底部填充/边距仍然链接到链接。我可以使用margin-bottom=0px删除底部填充，但我还没有找到一种方法来添加底部填充。

edit2：我无法更改行div标签，甚至没有添加另一个类“row-padded”来制作它：

 <div class="row row-padded">

用css： .row-padded{ margin-bottom:30px}

所以我只是通过在链接顶部添加div标签来实现迂回方式。

Answer 1

试试这个，改变 html ，如下所示

<div class="row">

          <div class="col-lg-4 col-sm-4 col-xs-6 text-center"><!--add class text-center-->

            <a data-rel="" title="" href="" style="display: inline-block;"> <!-- change style attribute -->
              <img class="thumbnail align-center" src="" style="margin-bottom:0px;"><!-- remove class center-block and add style attribute    -->
            </a>
          </div>
</div>

工作演示 http://jsfiddle.net/qb7xnfbd/

Answer 2

img标记显示为内联文本，位于文本基线上，该基线下方具有用于任何字符下降和下划线的空间。

将img显示为块可解决此问题。

尝试：

a > img:only-child {
  display: block;
}

这会使作为父项a的唯一子项的图像显示为块。

有关发生这种情况的原因的详细说明，请参见：http://doctype.com/anchor-tag-containing-only-img-extends-below-bottom-image

链接延伸到图像外部的空间

2 个答案: