Est-il possible dans Bootstrap 4 d'ajouter la classe 'btn-sm' (petit bouton) dans media-breakpoint-xs? Je voudrais que les boutons soient de taille par défaut sauf sur les écrans xs où je voudrais qu'ils passent automatiquement à btn-sm.Bootstrap 4 taille du bouton responsive
Assigner .btn le dimensionnement .btn-sm à l'aide des médias entre-breakpoint mixin ...
/* change all .btn to .btn-sm size on xs */
@include media-breakpoint-between(xs,sm){
.btn {
@include button-size($btn-padding-y-sm, $btn-padding-x-sm, $font-size-sm, $btn-border-radius-sm);
}
}
https://www.codeply.com/go/FoEUO7XCDU
button-size mixin a changé légèrement :
@include media-breakpoint-between(xs,sm){
.btn {
@include button-size($input-btn-padding-y-sm, $input-btn-padding-x-sm, $font-size-sm, $line-height-sm, $btn-border-radius-sm);
}
}
c'est exactement ça! Merci d'avoir pris le temps de lire la question – Nik
Où dois-je inclure le code ci-dessus? – Mark
@Mark vous pouvez l'ajouter à n'importe quel fichier .scss dans votre projet, mais vous devrez peut-être importer bootstrap-grid.scss et _buttons.scss pour qu'il sache ce que 'xs', 'sm', '$ btn-padding-y -sm '(et les autres variables) signifient. Tels que: @ import "~ bootstrap/scss/bootstrap-grid.scss"; @ import "~ bootstrap/scss/mixins/_buttons.scss"; Tout cela peut varier en fonction de la configuration de votre projet ng2 – Nik
Ajoutez la classe à l'élément et appliquez des styles dans une requête multimédia. –
La classe est bootstrap par défaut, en ajoutant la classe à l'élément dans le code, le bouton obtiendrait ces styles quel que soit le point d'arrêt courant. –
Copie possible de [Comment créer des boutons réactifs dans bootstrap3?] (Https://stackoverflow.com/questions/21709917/how-to-create-responsive-buttons-in-bootstrap3) –