J'ai une application où la conception appelle un point d'arrêt 1280 du bureau à la tablette, ou, xl à lg respectivement. Cependant, Bootstrap a lui-même le point d'arrêt xl à 1200.
Je dois changer ce point d'arrêt xl globalement pour bootstrap. Dois-je recompiler Bootstrap 4 à partir des fichiers source?
J'ai essayé de le définir avec ma version Sass:
$grid-breakpoints: (
// Extra small screen / phone
xs: 0,
// Small screen / phone
sm: 576px,
// Medium screen / tablet
md: 768px,
// Large screen / desktop
lg: 992px,
// Extra large screen / wide desktop
xl: 1280px
);
$container-max-widths: (
sm: 540px,
md: 720px,
lg: 960px,
xl: 1220px
);
Cependant, rien n'a changé avec le point d'arrêt pour xl globalement, il ferait toujours la pause à 1200px de large.
Changer le $grid-breakpoints
variable fonctionnera bien. N'oubliez pas que vous devez importer /bootstrap
ou la bootstrap/variables
dans le custom.scss
, puis @import bootstrap après.
Par exemple:
$grid-breakpoints: (
xs: 0,
sm: 600px,
md: 800px,
lg: 1000px,
xl: 1280px
);
Démo: https://www.codeply.com/go/MlIRhbJYGj
Voir aussi: Comment étendre/modifier (personnaliser) Bootstrap 4 avec SASS
Vous devez remplacer le $grid-breakpoints
et$container-max-widths
variables AVANT d’importer les sources Bootstrap. Voici un exemple de travail ( scss ) :
// File: theme.scss
// Override default BT variables:
$grid-breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px,
xxl: 1900px
);
$container-max-widths: (
sm: 540px,
md: 720px,
lg: 960px,
xl: 1140px,
xxl: 1610px
);
// Import BT sources
@import "../node_modules/bootstrap/scss/bootstrap";
// Your CSS (SASS) rules here...
Selon leur documentation , pour personnaliser Bootstrap vous devez:
/scss/_variables.scss
vers _custom.scss
tout ce que vous voulez modifier!default
du code collé et changer les valeurs à votre guisenpm run dist
pour reconstruire à partir du source.Vous n'êtes pas censé modifier quoi que ce soit à l'intérieur de _variables.scss
, Car vous perdrez ces modifications lors de la mise à niveau de Bootstrap. Avec les étapes ci-dessus, vous pouvez mettre à niveau en toute sécurité Bootstrap) et conserver vos mods.
Remarque: Même si vous ne vous souciez pas de la mise à niveau et que vous souhaitez modifier directement dans /scss/_variables.scss
, Vous devez tout de même recompiler appliquez les modifications à vos fichiers /dist/
.