Bootstrap 4 ajouter plus d'espacements de tailles

Question

Je suis au milieu d'un projet web, où les espaces entre les sections ont 80px. Je voudrais créer une option de plus dans les espaceurs bootstrap.

Pour le moment, j'ai dans le code SASS:

section { 
    padding: 0 80px; 
} 

entretoises Bootstrap vont de .25em à 3em (.p-5 = 40px)

Je voudrais créer une classe contenant .p-6 5em (80px)

L'idéal serait:

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

A boo tstrap j'ai lié via CDN. Je ne peux pas imaginer comment créer ceci avec des variables, en quelque sorte l'intégrant dans le css de boostrap. Pourriez-vous me donner des indices?

Answer 1

Si vous utilisez SCSS, vous pouvez simplement ajouter une autre entrée à la variable d'entretoises de $ avant de compiler bootstrap ... donc quelque chose comme

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

ci-dessus prise et modifiée de https://github.com/twbs/bootstrap/blob/v4-dev/scss/_variables.scss#L100

Depuis On dirait que vous n'utilisez que du CSS, vous pouvez définir le sien suivant le modèle, donc dans votre propre CSS ajoutez un ensemble de classes (voir ci-dessous, prises et modifiées depuis 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; 
} 

et si vous voulez en particulier les moyens de point d'arrêt, vous pouvez faire

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