Rumah > hujung hadapan web > tutorial css > Bagaimana untuk Menukar Titik Putus XL Bootstrap 4?

Bagaimana untuk Menukar Titik Putus XL Bootstrap 4?

Susan Sarandon
Lepaskan: 2024-11-02 08:34:29
asal
350 orang telah melayarinya

How to Change Bootstrap 4's XL Breakpoint?

Menyesuaikan Titik Putus Bootstrap 4

Dalam Bootstrap 4, titik putus XL lalai ditetapkan pada 1200px. Walau bagaimanapun, dalam aplikasi tertentu, titik putus yang berbeza mungkin diperlukan. Panduan ini menerangkan cara untuk menyesuaikan titik putus Bootstrap dan menyediakan penyelesaian untuk menukar titik putus XL kepada 1280px untuk projek.

Untuk menukar titik putus XL secara global, anda perlu mengubah suai titik putus $grid dan $container-max pembolehubah -widths dalam fail sumber Sass Bootstrap. Berikut ialah contoh cara untuk melakukan ini:

<code class="scss">$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1280px
);

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1220px
);

// Import Bootstrap source files after modifying variables
@import "~bootstrap/scss/bootstrap";</code>
Salin selepas log masuk

Dengan mengubah suai pembolehubah ini sebelum mengimport sumber Bootstrap, anda boleh mengatasi titik putus lalai dan menggunakan nilai tersuai dalam aplikasi anda. Kaedah ini membolehkan anda menyesuaikan sistem grid Bootstrap untuk memenuhi keperluan khusus projek anda tanpa perlu menyusun semula rangka kerja daripada fail sumbernya.

Atas ialah kandungan terperinci Bagaimana untuk Menukar Titik Putus XL Bootstrap 4?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan