web-dev-qa-db-ja.com

Bootstrap 4サイズの間隔を追加します

私はWebプロジェクトの真ん中です。セクション間のスペースは80pxです。 bootstrapスペーサーにもう1つのオプションを作成したいと思います。

今のところ私はsassコードにいます：

section {
    padding: 0 80px;
}

ブートストラップスペーサーの範囲は.25emから3em（.p-5 = 40px）

5em（80px）を含む.p-6クラスを作成したい

理想は次のとおりです。

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

A bootstrap CDNを介してリンクしました。変数を使用してこれを作成する方法を想像できません。どういうわけかそれをboostrap cssに統合します。手がかりを教えていただけませんか？

csstwitter-bootstrapsassspacing
5
nicogaldo

Scssを使用している場合は、ブートストラップをコンパイルする前に、$ spacers変数に別のエントリを追加するだけです...

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

上記は https://github.com/twbs/bootstrap/blob/v4-dev/scss/_variables.scss#L1 から取得および変更されました

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;
}

特に中程度のブレークポイントが必要な場合は、

@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;
    }
}
9
kball

あなたがscssを使用していた場合、それはスペーサーの私の非常に基本的な拡張です（ブートストラップ4-デフォルトのfont-size：16px）

 $spacer: 1rem !default;
 $spacers: () !default;
 // stylelint-disable-next-line scss/dollar-variable-default
 $spacers: map-merge(
   (
     0: 0,
     1: ($spacer * .25),    //4px
     2: ($spacer * .5),     //8px
     3: $spacer,            //16px
     4: ($spacer * 1.5),    //24px
     5: ($spacer * 3),      //48px
     6: ($spacer * 4),      //64px
     7: ($spacer * 5),      //80px
     8: ($spacer * 6.25),   //100px
     9: ($spacer * 7.5),    //120px
     10: ($spacer * 9.375)  //150px
   ),
   $spacers
4
Stavros

これも役立つかもしれません。 SCSSでBootstrap 4以上を使用している場合。その後、以下を追加できます。デフォルトは1 rem-16px。

$spacer: 1rem;
$spacers: ( 0:0);
@for $i from 1 through 150 {
  $spacers: map-merge($spacers, (
  $i: ($i * $spacer)
  ));
}

注：興味深いのは、$ iが150までループし、150までのクラスを作成することです。

例：mt-10任意のhtmlタグ内。 <div class="mt-10">はすぐに機能します。 mt-10は10 * 16 = 160pxを示します:)

2
Ragavan Rajan

回避策があります。要素内に別のwrapperを追加し、パディングクラスを増やします。

P-6が必要な場合は、親コンテナーp-5とラッパーp-1を指定します。

0
morched23mj