Bagaimana untuk Mencipta Latar Belakang Bootstrap Lebar Penuh dengan Tindanan Lutsinar dan Berbilang Lajur?

Latar Belakang Bootstrap Lebar Penuh dengan Tindanan Warna Lutsinar dan Berbilang Lajur

Dalam Bootstrap 3, mencapai latar belakang lebar penuh dengan tindanan warna lutsinar sambil mengekalkan berbilang lajur boleh menjadi satu cabaran. Untuk menavigasi ini, anda boleh memanfaatkan teknik yang digariskan dalam pertanyaan terdahulu dan memanjangkannya untuk menggabungkan elemen lajur.

Demonstrasi kod yang disediakan dalam contoh Codepen mempamerkan pelaksanaan dengan berkesan. Berikut ialah coretan kod yang berkaitan untuk rujukan:

<div class="container extra">
  <div class="row">
    <div class="col-sm-4 left"></div>
    <div class="col-sm-8 right"></div>
  </div>
</div>

.container {
  width: 50%;
  margin: auto;
  margin-top: 1em;
  position: relative;
  overflow: visible;
}

.extra:before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 50%;
  width: 100vw;
  height: 100%;
  transform: translate(-50%, 0);
}

[class*="col"] {
  border: 2px solid grey;
  min-height: 120px;
  position: relative;
}

.left:before {
  content: '';
  position: absolute;
  height: 100%;
  width: 100vw;
  top: 0;
  right: 0;
  background: rgba(255, 0, 0, 0.5);
}

.right:before {
  content: '';
  position: absolute;
  height: 100%;
  width: 100vw;
  top: 0;
  left: 0;
  background: rgba(0, 0, 255, 0.25);
}

Pendekatan ini melibatkan penciptaan elemen tambahan dengan kelas 'tambahan' yang berfungsi sebagai bekas untuk keseluruhan reka letak. Dalam elemen 'tambahan' ini, anda akan mempunyai bekas kandungan utama dengan kelas 'bekas'. Untuk meletakkan tindanan berwarna di atas lajur, anda boleh menggunakan elemen pseudo ':before' pada kelas lajur 'kiri' dan 'kanan', yang membolehkan anda menambah kandungan sebelum kandungan sebenar elemen tersebut. Dengan menetapkan lebar dan tinggi elemen pseudo ini kepada 100vw dan 100%, anda memastikan ia meliputi keseluruhan lebar dan ketinggian lajur. Akhir sekali, anda boleh menentukan warna lutsinar menggunakan fungsi 'rgba()', dengan nilai terakhir mewakili tahap ketelusan (0 untuk lutsinar, 1 untuk legap sepenuhnya).

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Latar Belakang Bootstrap Lebar Penuh dengan Tindanan Lutsinar dan Berbilang Lajur?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!