css - Twitter の Bootstrap 3 で AddThis カウンターの右端が表示されない

Question

http://www.addthis.com/のデフォルト コードを Twitter の Bootstrap 3 で使用すると、カウンターの右側の境界線が失われます。

Answer 1

Twitter の Bootstrap 3 は、CSS のユニバーサル セレクターを使用して box-sizing ( https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizingを参照) を border-box に設定します。これは、IE7 のサポートが終了したことによる救いです。このセレクターは、AddThis カウンターを壊します。

カウンターは次のように設定されます<a class="addthis_counter addthis_bubble_style"></a>。

解決策: .addthis_counter クラスのボックス サイズをリセットします。ブートストラップ css の後に次のコードを追加します。

 .addthis_counter
{
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
      box-sizing: content-box;
}

以下：

.addthis_counter,
.addthis_counter * { .box-sizing(content-box); }

http://getbootstrap.com/getting-started/#third-partiesおよびBootstrap 3 が box-sizing: border-box に切り替わった理由も参照してください。