Bootstrap 3.0 - Fluid Grid yang mencakup Ukuran Kolom Tetap

Saya belajar cara menggunakan Bootstrap. Saat ini, saya mengarungi jalan melalui tata letak. Sementara Bootstrap cukup keren, semua yang saya lihat tampak ketinggalan zaman. Untuk kehidupan saya, saya memiliki apa yang saya pikir adalah tata letak dasar yang saya tidak tahu. Layout saya terlihat seperti berikut:

---------------------------------------------------------------------------
|       |       |                                                         |
|       |       |                                                         |
| 240px | 160px | All Remaining Width of the Window                       |
|       |       |                                                         |
|       |       |                                                         |
--------------------------------------------------------------------------|

Kisi ini perlu mengambil ketinggian penuh jendela. Dari pemahaman saya, saya perlu mencampur lebar tetap dan cairan. Namun, Bootstrap 3.0 tampaknya tidak memiliki kelas yang cair lagi. Bahkan jika itu terjadi, saya tidak bisa menemukan cara untuk mencampur ukuran kolom cairan dan tetap. Adakah yang tahu cara melakukan ini di Bootstrap 3.0?

Benar-benar tidak ada cara mudah untuk mencampur cairan dan lebar tetap dengan Bootstrap 3. Ini dimaksudkan seperti ini, karena sistem grid dirancang untuk menjadi cairan, responsif. Anda dapat mencoba meretas sesuatu, tetapi itu akan bertentangan dengan apa yang coba dilakukan oleh sistem Grid Responsif, maksudnya adalah untuk membuat tata letak itu mengalir di berbagai jenis perangkat.

Jika Anda harus tetap dengan tata letak ini, saya akan mempertimbangkan meletakkan halaman Anda dengan CSS khusus dan tidak menggunakan kisi.

sunting: Karena banyak orang tampaknya ingin melakukan ini, saya telah menulis panduan singkat dengan kasus penggunaan yang lebih umum di sini https://www.atlascode.com/bootstrap-fixed-width-sidebars/ . Semoga ini bisa membantu.

Sistem grid bootstrap3 mendukung bersarang baris yang memungkinkan Anda untuk menyesuaikan baris root untuk memungkinkan menu sisi lebar tetap.

Anda perlu memasukkan padding-kiri pada baris root, lalu memiliki baris anak yang berisi elemen tata letak grid normal Anda.

Inilah cara saya biasanya melakukan ini http://jsfiddle.net/u9gjjebj/

html

<div class="container">
    <div class="row">
        <div class="col-fixed-240">Fixed 240px</div>
        <div class="col-fixed-160">Fixed 160px</div>
        <div class="col-md-12 col-offset-400">
            <div class="row">
            Standard grid system content here
            </div>
        </div>
    </div>
</div>

css

.col-fixed-240{
    width:240px;
    background:red;
    position:fixed;
    height:100%;
    z-index:1;
}

.col-fixed-160{
    margin-left:240px;
    width:160px;
    background:blue;
    position:fixed;
    height:100%;
    z-index:1;
}

.col-offset-400{
    padding-left:415px;
    z-index:0;
}

atau menggunakan properti tampilan dengan sel tabel;

css

.table-layout {
    display:table;
    width:100%;
}
.table-layout .table-cell {
    display:table-cell;
    border:solid 1px #ccc;
}

.fixed-width-200 {
    width:200px;
}

html

<div class="table-layout">
    <div class="table-cell fixed-width-200">
        <p>fixed width div</p>
    </div>
    <div class="table-cell">
        <p>fluid width div</p>    
    </div>
</div>

http://jsfiddle.net/DnGDz/

Saya punya masalah yang sedikit berbeda:

• Saya perlu menggabungkan kolom tetap dan cair sebagai bagian dari tabel daripada sebagai bagian dari tata letak jendela penuh
• Saya perlu memiliki kolom diperbaiki ke kiri dan kanan
• Saya tidak khawatir tentang latar belakang kolom menggunakan ketinggian penuh baris yang berisi

Sebagai hasilnya, saya beralih ke floatkolom kiri dan kanan, dan kemudian dapat menggunakan Bootstrap rowuntuk melakukan kolom fluida di antaranya.

<div>
    <div class="pull-left" style="width:240px">Fixed 240px</div>
    <div class="pull-right" style="width:120px">Fixed 120px</div>
    <div style="margin-left:240px;margin-right:120px">
        <div class="row" style="margin:0px">
            Standard grid system content here
        </div>
    </div>
</div>

Diperbarui 2018

IMO, cara terbaik untuk mendekati ini di Bootstrap 3 adalah menggunakan kueri media yang sejajar dengan breakpoint Bootstrap sehingga Anda hanya menggunakan kolom lebar tetap pada layar yang lebih besar dan kemudian membiarkan susunan tumpukan responsif pada layar yang lebih kecil. Dengan cara ini Anda menjaga daya tanggap ...

@media (min-width:768px) {
  #sidebar {
      width: inherit;
      min-width: 240px;
      max-width: 240px;
      min-height: 100%;
      position:relative;
  }
  #sidebar2 {
      min-width: 160px;
      max-width: 160px;
      min-height: 100%;
      position:relative;
  }
  #main {
      width:calc(100% - 400px);
  }
}

Working Bootstrap Fixed-Fluid Demo

Bootstrap 4 akan memiliki flexbox sehingga tata letak seperti ini akan jauh lebih mudah: http://www.codeply.com/go/eAYKvDkiGw

OK, jawaban saya sangat bagus:

<style>
    #wrapper {
        display:flex;    
        width:100%;
        align-content: streach;
        justify-content: space-between;
    }    

    #wrapper div {
        height:100px;
    }

    .static240 {
        flex: 0 0 240px;
    }
    .static160 {
        flex: 0 0 160px;
    }

    .growMax {
        flex-grow: 1;
    }

</style>

<div id="wrapper">
  <div class="static240" style="background:red;" > </div>
  <div class="static160"  style="background: green;" > </div> 
  <div class="growMax"  style="background:yellow;"  ></div>
</div>

taman bermain jsfiddle

jika Anda ingin dukungan untuk semua browser, gunakan https://github.com/10up/flexibility

UPDATE 2014-11-14: Solusi di bawah ini terlalu tua, saya sarankan menggunakan metode tata letak kotak fleksibel. Berikut ini adalah ikhtisar: http://learnlayout.com/flexbox.html

Solusi saya

html

<li class="grid-list-header row-cw row-cw-msg-list ...">
  <div class="col-md-1 col-cw col-cw-name">
  <div class="col-md-1 col-cw col-cw-keyword">
  <div class="col-md-1 col-cw col-cw-reply">
  <div class="col-md-1 col-cw col-cw-action">
</li>

<li class="grid-list-item row-cw row-cw-msg-list ...">
  <div class="col-md-1 col-cw col-cw-name">
  <div class="col-md-1 col-cw col-cw-keyword">
  <div class="col-md-1 col-cw col-cw-reply">
  <div class="col-md-1 col-cw col-cw-action">
</li>

scss

.row-cw {
  position: relative;
}

.col-cw {
  position: absolute;
  top: 0;
}


.ir-msg-list {

  $col-reply-width: 140px;
  $col-action-width: 130px;

  .row-cw-msg-list {
    padding-right: $col-reply-width + $col-action-width;
  }

  .col-cw-name {
    width: 50%;
  }

  .col-cw-keyword {
    width: 50%;
  }

  .col-cw-reply {
    width: $col-reply-width;
    right: $col-action-width;
  }

  .col-cw-action {
    width: $col-action-width;
    right: 0;
  }
}

Tanpa memodifikasi terlalu banyak kode tata letak bootstrap.

Perbarui (bukan dari OP): menambahkan cuplikan kode di bawah ini untuk memudahkan pemahaman atas jawaban ini. Tapi sepertinya itu tidak berfungsi seperti yang diharapkan.

ul {
  list-style: none;
}
.row-cw {
  position: relative;
  height: 20px;
}
.col-cw {
  position: absolute;
  top: 0;
  background-color: rgba(150, 150, 150, .5);
}
.row-cw-msg-list {
  padding-right: 270px;
}
.col-cw-name {
  width: 50%;
  background-color: rgba(150, 0, 0, .5);
}
.col-cw-keyword {
  width: 50%;
  background-color: rgba(0, 150, 0, .5);
}
.col-cw-reply {
  width: 140px;
  right: 130px;
  background-color: rgba(0, 0, 150, .5);
}
.col-cw-action {
  width: 130px;
  right: 0;
  background-color: rgba(150, 150, 0, .5);
}

<ul class="ir-msg-list">
  <li class="grid-list-header row-cw row-cw-msg-list">
    <div class="col-md-1 col-cw col-cw-name">name</div>
    <div class="col-md-1 col-cw col-cw-keyword">keyword</div>
    <div class="col-md-1 col-cw col-cw-reply">reply</div>
    <div class="col-md-1 col-cw col-cw-action">action</div>
  </li>

  <li class="grid-list-item row-cw row-cw-msg-list">
    <div class="col-md-1 col-cw col-cw-name">name</div>
    <div class="col-md-1 col-cw col-cw-keyword">keyword</div>
    <div class="col-md-1 col-cw col-cw-reply">reply</div>
    <div class="col-md-1 col-cw col-cw-action">action</div>
  </li>
</ul>

Mengapa tidak hanya mengatur dua kolom kiri menjadi tetap dengan di css Anda sendiri dan kemudian membuat tata letak kotak baru dari 12 kolom penuh untuk sisa konten?

<div class="row">
    <div class="fixed-1">Left 1</div>
    <div class="fixed-2">Left 2</div>
    <div class="row">
        <div class="col-md-1"></div>
        <div class="col-md-11"></div>
    </div>
</div>