Bolehkah saya Menyesuaikan Titik Putus Bootstrap 4 Tanpa Menyusun Semula?

Menyesuaikan Titik Putus Bootstrap 4

Bootstrap 4 menggunakan sistem grid untuk membantu meletakkan elemen pada halaman. Titik putus dalam sistem grid ini menentukan apabila elemen mengubah reka letak. Walau bagaimanapun, titik putus xl lalai 1200px mungkin tidak sesuai untuk aplikasi tertentu.

Bolehkah titik putus Bootstrap diubah suai secara global tanpa menyusun semula fail sumber?

Ya, ia adalah mungkin untuk menukar titik putus Bootstrap secara global tanpa menggunakan penyusunan semula.

Cara untuk mengatasi titik putus Bootstrap:

Untuk mengatasi titik putus lalai Bootstrap, anda perlu melakukan perkara berikut:

1. Tetapkan titik putus $grid pembolehubah:

   • Tentukan peta Sass baharu ($grid-breakpoints) yang menentukan titik putus yang diingini.

   • Contohnya:

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

2. Tetapkan Pembolehubah $container-max-widths:

   • Tentukan peta Sass baharu ($container-max-widths) yang menentukan lebar maksimum bekas pada setiap titik putus.
   • Ini memastikan bekas kekal dalam lingkungan yang dikehendaki titik putus.

3. Import sumber Bootstrap dengan penggantian:

   • Import sumber Bootstrap selepas mentakrifkan pembolehubah timpa.
   • Ini akan menggunakan titik putus tersuai anda secara global.

Contoh:

Di bawah ialah contoh cara mengatasi titik putus xl dalam Bootstrap menggunakan Sass:

<code class="sass">// Override default BT variables
$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1280px
);

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

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

Dengan mengikuti langkah ini, anda boleh menyesuaikan titik putus Bootstrap agar sesuai keperluan aplikasi tanpa perlu menyusun semula fail sumber.

Atas ialah kandungan terperinci Bolehkah saya Menyesuaikan Titik Putus Bootstrap 4 Tanpa Menyusun Semula?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!