ブートストラップimg-responsiveにより、列全体にまたがるハイパーリンクが発生する

Question

次のコードは、ハイパーリンクイメージを作成します。

<div class="row" style="padding-top: 25px;"> 
    <div class="col-xs-12"> 
     <a href="http://www.aibd.org" target="_blank"> 
      <img src="/images/aibd_logo.png" class="img-responsive" style="padding: 5px; height: 125px; background-color: #ffffff; margin: 0 auto;" /> 
     </a> 
    </div> 
</div> 

ご覧のとおり、divは12個のブートストラップ列にまたがっています。イメージはハイパーリンクに含まれています。私はイメージ上で "img-responsive"クラスを使用しています。 "margin：0 auto"を指定すると、イメージは列の中央に表示されます。

あなたがブラウザで画像の上にマウスを置く、あなたが期待するよう「指」のカーソルを取得：

は、ここで問題です。ただし、カーソルを画像の左から右に移動しても、同じBootstrap行内に置いておけば、カーソルが画像の上になくてもカーソルは "指"を表示します。クリックすると、リンクされたページに移動します。あなたがもはやイメージの上を浮遊していなくても、それは依然としてハイパーリンクを認識しています。

http://new.integriby.comに行き、ページの下部に向かってAIBDロゴを表示すると、この現象が発生します。

これはブートストラップのバグですか？誰かがこれに対する解決策を知っていますか？

Answer 1

これはブートストラップのバグではありませんが、これは予想される動作です。 img-responsiveはimg display:blockを割り当て、ブロック要素にします。イメージdisplay:inline-block;を割り当て、マージン：autoを取り除き、それをブロック要素にすることなく同じサイジング効果を得ることができます。次に、divのtext-align：centerをaの中心に設定します。

Answer 2

別の解決策は、（あなたが指の爪の上にそれを表示する考慮すれば、あなたはmax-width: 125px; max-height: 125pxを適用することができ;）img-responsiveクラスなし（シンプルdivは十分だろう、実際にはこのような場合には、行と列を必要としない）col-xs-12にtext-centerを使用することです。

Answer 3

インラインのCSSコードを確認してください。 style = "cursor：default;"を使用します。リンクとカーソルの場合：ポインタ;画像のために。

解決策が見つかることを願っています。

<div class="row" style="padding-top: 25px;"> 
 
    <div class="col-xs-12"> 
 
     <a href="http://www.aibd.org" target="_blank" style="cursor: default;"> 
 
      <img src="images/aibd_logo.png" class="img-responsive" style="cursor: pointer; padding: 5px; height: 125px; background-color: #ffffff; margin: 0 auto;" /> 
 
     </a> 
 
    </div> 
 
</div>