css - Bootstrap 链接区域在焦点和事件上较小？

Question

我有一个缩略图库和每个 <a>元素周围有一个轮廓，当我单击其中一个链接时，轮廓明显比周围的元素短(只有一两个像素，但足以令人讨厌)

codepen 链接 - http://codepen.io/Davez01d/pen/NxMzYy?editors=1100

这是 html -

<div class="row vert-space-30"><!--row-->
      <div id="padding-helper"><!--padding-helper-->
        <div class="col-sm-3 col-xs-6 port-tile text-center">
          <a class="thumbnail" href="http://codepen.io/Davez01d/full/obyBbz/" target="_blank">
            <img src="http://i1155.photobucket.com/albums/p558/Davez01d/Portfolio%20site-Codepen/f043ed05-0df8-42b9-a7b3-57ad6cab5f3b_zpsq2074gko.png" alt="Pomodoro thumbnail"/>
            <div class="caption">  
              <h4>Pomodoro Timer</h4>
              <p class="tech-used">JavaScript, jQuery, HTML, Css</p>
            </div>
          </a>
        </div>
        <div class="col-sm-3 col-xs-6 port-tile text-center">
          <a class="thumbnail" href="http://codepen.io/Davez01d/full/JGvdxX/" target="_blank">
            <img src="http://i1155.photobucket.com/albums/p558/Davez01d/Portfolio%20site-Codepen/726c239e-157c-4e4d-8931-77f3a4c9de9c_zpslofzlecy.png" alt="Calculator thumbnail"/>
            <div class="caption">  
              <h4>JavaScript Calculator</h4>
              <p class="tech-used">JavaScript, jQuery, HTML, Css</p>
            </div>
          </a>
        </div>
        <div class="col-sm-3 col-xs-6 port-tile text-center">
          <a class="thumbnail" href="http://codepen.io/Davez01d/full/gPegpd/" target="_blank">
            <img src="http://i1155.photobucket.com/albums/p558/Davez01d/Portfolio%20site-Codepen/e9b19619-ed3c-4149-ab15-0a039c59f5a7_zps7vmaslo8.png" alt="Quote generator thumbnail"/>
            <div class="caption">  
              <h4>Random Quote Generator</h4>
              <p class="tech-used">jQuery, twitter API</p>
            </div>
          </a>
        </div>
        <div class="col-sm-3 col-xs-6 port-tile text-center">
          <a class="thumbnail" href="http://codepen.io/Davez01d/full/KVQzwr/" target="_blank">
            <img src="http://i1155.photobucket.com/albums/p558/Davez01d/Portfolio%20site-Codepen/cc4d40ed-a085-43d6-9dde-90c59161b023_zps0ppintnt.png" alt="Web sketchpad thumbnail"/>
            <div class="caption">  
              <h4>Web Sketchpad</h4>
              <p class="tech-used">jQuery, HTML, CSS</p>
            </div>
          </a>
        </div>
      </div><!--padding-helper-->
    </div><!--row-->

和CSS-

.port-tile a {
  z-index: 0;
  position: relative;
  border-radius: 0;
  border: none;
  padding: 0;
  outline: 3px solid #d63c20;
  transition: all .12s ease;
}
.port-tile a:hover {
  z-index: 10;
  outline: 3px solid #d63c20;
  transform: scale(1.12, 1.12);
}
.port-tile a:active, a:focus {
    outline: 3px solid #d63c20;
}

另请注意，我发现很难找到链接、按钮等所有 Bootstrap 效果的列表，有这方面的好资源吗？它会帮助我很多。

Answer 1

这是 a:focus { outline-offset: -2px; 我相信你指的是，这导致了这个:

你可以用你自己的风格覆盖它，只需设置

a:focus {
    outline-offset: 0;
}

如果您根本不需要这条规则。或者，定位您希望删除它的特定元素。