Tengo una aplicación en la que el diseño requiere de una resolución de 1280 punto de interrupción de escritorio de la tableta, o, xl para lg respectivamente. Sin embargo, Bootstrap en sí tiene el xl punto de interrupción en 1200.

Necesito cambiar que xl punto de interrupción a nivel mundial para el bootstrap. ¿Tengo que volver a compilar Bootstrap 4 de los archivos de origen?

Traté de establecer esta con mi Sass construir:

$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
);

Sin embargo, nada cambió con el punto de corte para la xl a nivel mundial, todavía haría el descanso en lugar de 1200px de ancho.

InformationsquelleAutor smb | 2017-12-11

3 Comentarios

  1. 19

    Que usted necesita para reemplazar el $grid-breakpoints y $container-max-widths variables. Aquí un ejemplo de trabajo (secs):

    //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...
    • Funcionó muy bien!
  2. 7

    De acuerdo a sus documentación, con el fin de personalizar Bootstrap necesita:

    1. copy/paste de la /scss/_variables.scss a _custom.scss lo que usted desea modificar
    2. eliminar cualquier !default de la pega el código y cambiar los valores a lo que usted desea
    3. compilar (ver Herramientas de construcción) – necesita para ejecutar correctamente npm run dist para la reconstrucción de la fuente.

    No debes modificar nada dentro de _variables.scss como usted perderá los cambios en la actualización de Bootstrap. Con los pasos anteriores, usted puede de manera segura la actualización de Bootstrap y mantener tus mods.

    Nota: Incluso si usted no tiene cuidado acerca de la actualización, y quiere modificar directamente en /scss/_variables.scss, usted todavía necesita para volver a compilar para aplicar los cambios a su /dist/ archivos.

Dejar respuesta

Please enter your comment!
Please enter your name here