我々が公式にサードパーティのプラグインまたはアドオンをサポートしない一方で、 あなたのプロジェクトにおいて、潜在的な問題を回避するのに役立ついくつかの有用なアドバイスを提供します。

Box-sizing

Googleマップ、Googleカスタムサーチエンジンを含む幾つかのサードパーティのソフトでは、 paddingが最終的な要素の幅の算出に作用しない* { box-sizing: border-box; }の規則が原因で、 Bootstrapとコンフリクト(衝突)してしまいます。 box-modelとbox-sizingについてより詳しく知りたければ、 CSS-Tricksを参照してください。

コンテキスト(状況)次第で必要に応じて特定の領域全体のbox-sizingを、 上書き(オプション1)またはリセット(オプション2)することも可能です。

/* Box-sizing リセット
 *
 * Bootstrapによるグローバルのbox modelの設定との衝突を避けるために、
 * 個別の要素を上書き、または領域全体をリセットします。
 * 
 * 個別の要素を上書きするオプションと領域をリセットする2つの選択肢があり、
 * 素のCSSとコンパイルされていないLessフォーマットが利用可能です。
 */

/* 選択肢 1A: 単一の要素のbox modleをCSSを通して上書き */
.element {
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
}

/* 選択肢 1B: 単一の要素のbox modelを
   BootstrapのLessのmixinを使用して上書き */
.element {
  .box-sizing(content-box);
}

/* 選択肢 2A: CSSを通して領域全体をリセット */
.reset-box-sizing,
.reset-box-sizing *,
.reset-box-sizing *:before,
.reset-box-sizing *:after {
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
}

/* 選択肢 2B: カスタムしたLess mixinを使用して
   領域全体をリセット */
.reset-box-sizing {
  &,
  *,
  *:before,
  *:after {
    .box-sizing(content-box);
  }
}
.element {
  .reset-box-sizing();
}

 Back to top