twitter-bootstrap - div 内のすべての要素のボックスサイズ

Question

別のサイトの上に挿入したいアプリケーションサイトで、ブートストラップ 4.0 縮小 css を使用しています。

私が抱えている問題は、これらのスタイルのために、次のスタイリングがアプリケーションの背後にあるサイトに影響を与えていることです:

*,
:after,
:before {
    -webkit-box-sizing: inherit;
    box-sizing: inherit;
}

次のように、ラッピング div 内のすべてのみを対象とするように、CSS を変更しようとしました。

.prefix-wrapper * {
        -webkit-box-sizing: inherit;
        box-sizing: inherit;
    }

これはうまくいきませんでした - 何かアイデアはありますか?

score 0 · Accepted Answer

Bootstap 4 には詳しくありませんが、現在の「考え」では、ボックスのサイズ変更の「リセット」は次のように形成されます。

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

ですので、ご利用希望の方は、

.prefix-wrapper * {
        -webkit-box-sizing: inherit;
        box-sizing: inherit;
    }

...最初に、親の box-sizing プロパティを別のものに変更する必要があります。

次のようなものです：

.prefix-wrapper {
        -webkit-box-sizing: content-box;
        box-sizing: content-box;
    }

twitter-bootstrap - div 内のすべての要素のボックス サイズ