Bagaimana untuk Membuat Reka Letak Bendalir Tetap dengan Twitter Bootstrap?

Membuat Reka Letak Bendalir Tetap 2 Lajur dengan Twitter Bootstrap

Pengenalan

Mencipta susun atur dengan lajur lebar tetap bersama lajur lebar bendalir adalah keperluan biasa untuk reka bentuk web responsif. Gaya reka letak ini membolehkan bar sisi atau panel navigasi tetap bersama kawasan kandungan fleksibel yang menyesuaikan diri dengan saiz skrin yang berbeza. Menggunakan Twitter Bootstrap, adalah mungkin untuk mencapai ini susun atur.

Pelaksanaan

HTML

<div class="container-fluid fill">
  <div class="row-fluid">
    <div class="fixed">
      ...
    </div>
    <div class="filler">
      ...
    </div>
  </div>
</div>

CSS

.fixed {
  width: 150px;
  float: left;
}

.fixed + div {
  margin-left: 150px;  
  overflow: hidden;
}

.fill { 
  min-height: 100%;
  position: relative;
}

.filler::after {
  background-color:inherit;
  bottom: 0;
  content: "";
  height: auto;
  left: 0;
  position: absolute;
  top: 0;
  width: inherit;
  z-index: -1;  
}

Penjelasan

• The kelas kontena-bendalir mencipta reka letak bendalir yang memenuhi keseluruhan port pandangan.
• Kelas row-fluid memastikan elemen anak mengisi lebar yang tersedia.
• Kelas .fixed menetapkan lebar bar sisi kepada nilai tetap (cth., 150px).
• Harta jidar kiri adik beradik .tetap elemen memastikan bahawa kawasan kandungan bermula selepas bar sisi.
• Kelas isian menetapkan ketinggian minimum 100% pada elemen cecair bekas, memastikan bar sisi dan kawasan kandungan adalah ketinggian yang sama.
• Elemen .filler, yang dicipta oleh pemilih pseudo ::selepas, menindih div .filler dan memberikan ilusi ketinggian yang sama untuk kedua-duanya lajur.

Atas ialah kandungan terperinci Bagaimana untuk Membuat Reka Letak Bendalir Tetap dengan Twitter Bootstrap?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!