ブートストラップ4は、より多くのサイズの間隔を追加します。

Question

私は、セクション間のスペースが80ピクセルのウェブプロジェクトの真中にいます。 ブートストラップスペーサにもう1つのオプションを作成したいと思います。

section { 
    padding: 0 80px; 
} 

ブートストラップスペーサIを含む.p-6クラスを作成したい

（.P-5 = 40ピクセル）.25emから3emの範囲：私はSASSのコードを持っている瞬間について

5em（80px）

理想的には、次のようになります

<section class="py-5 py-md-6"> 

BOO tstrap私はCDN経由でリンクしています。私はどのようにboostrapのCSSにそれを統合する変数でこれを作成する方法を想像することはできません。あなたは私に手がかりをくれますか？

Answer 1

あなたはSCSSを使用していた場合、あなたは、単にブートストラップをコンパイルする前に、変数$スペーサーに別のエントリを追加することができます...それ以来https://github.com/twbs/bootstrap/blob/v4-dev/scss/_variables.scss#L100

から採取され、修正さそう

$spacers: (
    0: 0, 
    1: ($spacer * .25), 
    2: ($spacer * .5), 
    3: $spacer, 
    4: ($spacer * 1.5), 
    5: ($spacer * 3), 
    6: ($spacer * 5) 
) 

のようなもの

上記CSSだけを使用しているように聞こえますが、独自のCSSを使用して独自のCSSを定義することができます（下記参照、https://github.com/twbs/bootstrap/blob/v4-dev/dist/css/bootstrap.css#L6937から取得して変更します）。

.pt-6, 
.py-6 { 
    padding-top: 5rem !important; 
} 

.pr-6, 
.px-6 { 
    padding-right: 5rem !important; 
} 

.pb-6, 
.py-6 { 
    padding-bottom: 5rem !important; 
} 

.pl-6, 
.px-6 { 
    padding-left: 5rem !important; 
} 

、特にあなたがメディアブレークポイントのものをしたい場合、あなたは私が推測する80pxを与えるだろう、ブートストラップマージンとパディングを混合

@media (min-width: 768px) { 
    .pt-md-6, 
    .py-md-6 { 
     padding-top: 5rem !important; 
    } 

    .pr-md-6, 
    .px-md-6 { 
     padding-right: 5rem !important; 
    } 

    .pb-md-6, 
    .py-md-6 { 
     padding-bottom: 5rem !important; 
    } 

    .pl-md-6, 
    .px-md-6 { 
     padding-left: 5rem !important; 
    } 
}