Bagaimanakah Anda Boleh Mencapai Bar Sisi Lebar Tetap dan Kawasan Kandungan Lebar Bendalir dalam Bootstrap Twitter?

Melaksanakan Reka Letak Bendalir Tetap dengan Twitter Bootstrap

Walaupun populariti Twitter Bootstrap, kebimbangan telah dibangkitkan tentang keupayaannya untuk mencipta dua susun atur lajur yang menampilkan panel sisi lebar tetap dan kandungan lebar bendalir kawasan.

Mungkin Penyelesaian:

Penyelesaian Asal (Bootstrap v1.0)

Menggunakan gabungan HTML yang diubah suai dan CSS, adalah mungkin untuk mencapai susun atur cecair tetap dalam Bootstrap v1.0. Kod yang dikemas kini adalah seperti berikut:

<div class="container-fluid fill">
    <div class="row-fluid">
        <div class="fixed">  <!-- Fixed width -->
            ...
        </div>
        <div class="hero-unit filler">  <!-- Removed spanX class -->
            ...
        </div>
    </div>
</div>

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

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

/* CSS to ensure sidebar and content are same height (optional) */

html, body {
    height: 100%;
}

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

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

Penyelesaian Kemas Kini (Bootstrap v2.0)

Penyingkiran kelas ".container-fluid" dalam Twitter Bootstrap v2.0 menjadikan penyelesaian asal tidak serasi. Walau bagaimanapun, sedikit pengubahsuaian CSS membenarkan pelaksanaan susun atur cecair tetap dua lajur:

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

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

Memastikan Ketinggian Sama untuk Bar Sisi dan Kandungan

Walaupun tidak perlu , selalunya wajar untuk memastikan bahawa bar sisi dan lajur kandungan mempunyai ketinggian yang sama. Ini boleh dicapai dengan menambahkan kelas ".filler" pada lajur lebar bendalir dan menggunakan pemilih pseudo ::after untuk menambah elemen pengisi yang muncul untuk mengisi ruang yang tinggal.

.filler::after {
    background-color: inherit;
    bottom: 0;
    content: "";
    height: 100%;
    left: 150px;  /* Match fixed width */
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -1;  
}

Nota:

• Untuk susun atur bendalir-bendalir, tetapkan ".bendalir-bekas" untuk mempunyai ketinggian min 100%.
• Untuk mempunyai elemen pengisi di sebelah kiri halaman, tukar "kiri: 150px;" ke "kanan: 0;".

Atas ialah kandungan terperinci Bagaimanakah Anda Boleh Mencapai Bar Sisi Lebar Tetap dan Kawasan Kandungan Lebar Bendalir dalam Bootstrap Twitter?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!