Bagaimana untuk Membuat Reka Letak 2 Lajur Cecair Tetap dengan Bootstrap Twitter?

Cara Melaksanakan Reka Letak 2 Lajur Cecair Tetap dengan Bootstrap Twitter

Latar Belakang

Membuat susun atur 2 lajur dengan satu lebar tetap lajur dan satu lajur lebar bendalir ialah corak reka bentuk biasa. Versi terdahulu Twitter Bootstrap membenarkan ini menggunakan kelas .container-fluid, tetapi ini tidak lagi disokong dalam Bootstrap 2.0 dan yang lebih baru.

Penyelesaian

Untuk menangani perkara ini, kami boleh menggunakan gabungan CSS dan HTML yang diubah suai sedikit kod:

HTML

<div class="container-fluid fill">
    <div class="row-fluid">
        <div class="fixed">...Fixed Column...</div>
        <div class="hero-unit filler">...Fluid Column...</div>
    </div>
</div>

CSS

/* Fixed-Fluid Layout CSS */

.fixed {
    width: 150px;  /* Fixed width for fixed column */
    float: left;
}

.fixed + div {
    margin-left: 150px;  /* Match fixed width from .fixed class */
    overflow: hidden;
}

/* Content Height Equalization CSS (optional) */

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;  
}

Nota

• Laraskan .lebar tetap kepada saiz lajur tetap yang anda inginkan.
• Untuk memaparkan lajur bendalir di sebelah kiri, gantikan kanan: 0 dengan kiri: 0 dalam CSS .pengisi.
• CSS tambahan adalah pilihan tetapi memastikan bahawa lajur tetap dan bendalir adalah ketinggian yang sama.

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