web-dev-qa-db-fra.com

Bootstrap 4 Modifier les points d'arrêt

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.

csstwitter-bootstrapsassresponsive-designbootstrap-4
22
smb

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

16
Zim

Vous devez remplacer le $grid-breakpointset$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...
22
kxo

Selon leur documentation , pour personnaliser Bootstrap vous devez:

  1. copier/coller de /scss/_variables.scss vers _custom.scss tout ce que vous voulez modifier
  2. supprimer tout !default du code collé et changer les valeurs à votre guise
  3. recompiler (voir Outils de compilation ) - vous devez exécuter avec succès npm 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/.

8
Andrei Gheorghiu