Bolehkah Twitter Bootstrap digunakan untuk membuat susun atur dua lajur dengan bar sisi lebar tetap dan kawasan kandungan utama lebar bendalir?

Membuat Reka Letak 2 Lajur (Tetap - Cecair) dengan Twitter Bootstrap

Dalam artikel ini, kami akan menyelidiki sama ada ia boleh dilaksanakan mencapai susun atur dua lajur dengan bar sisi lebar tetap dan kawasan kandungan utama lebar bendalir menggunakan Twitter Bootstrap. Kami akan memberikan penjelasan dan penyelesaian yang komprehensif untuk membimbing pembangunan anda.

Adakah Mungkin dengan Twitter Bootstrap?

Twitter Bootstrap pada mulanya menyertakan pilihan susun atur cecair tetap melalui kelas ".bendalir bekas". Walau bagaimanapun, dengan keluaran versi 2.0, ciri ini telah dialih keluar. Oleh itu, adalah tidak mungkin untuk melaksanakan reka letak cecair tetap hanya menggunakan kelas Bootstrap standard.

Penyelesaian

1. Reka Letak Bendalir Tetap

Kami boleh melaksanakan susun atur cecair tetap menggunakan gabungan HTML yang diubah suai dan CSS:

HTML:

<div>

CSS:

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

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

html, body {
    height: 100%;
}

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

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

2. Ketinggian Lajur Sama (Pilihan)

Untuk mencapai ketinggian yang sama untuk bar sisi dan kawasan kandungan:

HTML:

<div>

Nota:

• Untuk menjadikan bar sisi sebagai elemen pengisi, tukar "kanan: 0" kepada "kiri: 0" dalam CSS.

Atas ialah kandungan terperinci Bolehkah Twitter Bootstrap digunakan untuk membuat susun atur dua lajur dengan bar sisi lebar tetap dan kawasan kandungan utama lebar bendalir?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!