Bagaimana untuk Mencipta Dua Lajur Latar Belakang Skrin Penuh dengan Kandungan Berkotak Bootstrap?

Dapatkan Dua Lajur dengan Warna Latar Belakang Berbeza yang Melanjutkan ke Tepi Skrin

Memahami Masalah

Matlamatnya adalah untuk mencipta susun atur halaman web dengan dua lajur yang mempunyai warna latar belakang berbeza memanjang ke tepi skrin sambil memastikan kandungan dalam lajur kekal dalam lebar berkotak bootstrap yang ditentukan.

Penyelesaian Bootstrap 3

Pendekatan yang disyorkan dalam Bootstrap 3 ialah menggunakan DIV pembalut lain di sekeliling bekas kedua. Ini membolehkan bekas kedua mewarisi lebar pembungkus paling luar manakala warna latar belakang pembungkus boleh memanjang ke tepi skrin.

<div class="container">

Penyelesaian Bootstrap 4 dan 5

Dalam Bootstrap 4 dan 5, kaedah pilihan adalah menggunakan kelas cecair bekas bersama-sama dengan lajur grid yang lebih kecil bersarang dalam lajur luar untuk mencapai kesan yang diingini.

<!-- Bootstrap 5 -->
<div class="container-fluid">
  <div class="row">
    <div class="col-6 bg-info">
      <div class="row justify-content-end">
        <div class="col-9">...</div>
      </div>
    </div>
    <div class="col-6 bg-danger">
      <div class="row justify-content-start">
        <div class="col-9">...</div>
      </div>
    </div>
  </div>
</div>
<!-- Bootstrap 4 -->
<div class="container-fluid">
  <div class="row">
    <div class="col-6 bg-info">
      <div class="row justify-content-end">
        <div class="col-9">...</div>
      </div>
    </div>
    <div class="col-6 bg-danger">
      <div class="row justify-content-start">
        <div class="col-9">...</div>
      </div>
    </div>
  </div>
</div>

Pilihan Tambahan

Cara lain untuk mencapai kesan yang serupa ialah menggunakan elemen pseudo, seperti .right :sebelum ini, untuk mencipta rupa latar belakang berwarna melangkaui lebar bekas.

.right:before {
  right: -999em;
  background: rebeccapurple;
  content: '';
  display: block;
  position: absolute;
  width: 999em;
  top: 0;
  bottom: 0;
}

Ini kaedah juga boleh digunakan pada Bootstrap 3 dan versi yang lebih baru.

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Dua Lajur Latar Belakang Skrin Penuh dengan Kandungan Berkotak Bootstrap?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!