تجاوز نقاط توقف نظام الشبكة في Bootstrap 4.x و5.x

لتخصيص نقطة توقف Bootstrap xl، من الضروري فهم المتغيرات التي تحكم نقاط التوقف وعرض الحاويات.

sass
في Sass الخاص بك للإنشاء، ستحتاج إلى تعديل متغيرين: $grid-breakpoints و$container-max-widths. تحدد هذه المتغيرات حدود الحجم التي سيعيد عندها نظام شبكة Bootstrap وعناصر الحاوية هيكلة نفسها.

في كود Sass المقدم، قمت بتعديل نقاط توقف الشبكة $ بشكل صحيح لتشمل نقطة توقف بحجم 1280 بكسل. ومع ذلك، لكي تدخل التغييرات حيز التنفيذ، يجب عليك أيضًا تعديل المتغير $container-max-widths.

مثال عملي
لتجاوز نقطة توقف xl وتعيينها إلى 1280 بكسل، إليك مثال عملي في Sass:

// theme.scss
// Override default BT variables
$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1280px, // Custom xl breakpoint
  xxl: 1900px
);

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1220px, // Custom max-width for xl breakpoint
  xxl: 1610px
);

// Import BT sources
@import "../node_modules/bootstrap/scss/bootstrap";

// Your CSS (SASS) rules here...

في هذا المثال، نجحت في توسيع نقاط توقف Bootstrap لتشمل نقطة التوقف المخصصة البالغة 1280 بكسل مع ضبط الحد الأقصى لعرض الحاوية وفقًا لذلك.