Sesuaikan titik putus sistem grid Bootstrap 4

Question

Saya mempunyai aplikasi di mana reka bentuk memerlukan 1280 titik putus dari desktop ke tablet atau xl ke lg masing-masing. Walau bagaimanapun, Bootstrap sendiri mempunyai titik putus xl pada 1200.

Saya perlu menukar titik putus xl secara global untuk but. Adakah saya perlu menyusun semula Bootstrap 4 daripada sumber?

Saya cuba menetapkan ini dalam binaan Sass saya:

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

Walau bagaimanapun, tiada perubahan dalam titik putus xl global, ia masih akan pecah pada lebar 1200px.

Answer 1

Tukar $grid-breakpoints 变量就可以正常工作。请记住，您必须导入 custom.scss 中的 /bootstrap 或 bootstrap/variables kemudian selepas @import bootstrap.

Contohnya:

$grid-breakpoints: (
  xs: 0,
  sm: 600px,
  md: 800px,
  lg: 1000px,
  xl: 1280px
);

Demo: https://codeply.com/go/MlIRhbJYGj

Lihat juga: Cara melanjutkan/mengubah suai (sesuaikan) Bootstrap 4 dengan SASS

Answer 2

Bootstrap 4.x dan 5.x

Anda perlu mengatasi pembolehubah $grid-breakpoints 和 $container-max-widths sebelum mengimport sumber Bootstrap. Berikut ialah contoh yang berfungsi (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...