Bootstrap 3.0 - Lưới chất lỏng bao gồm Kích thước cột cố định

Tôi đang học cách sử dụng Bootstrap. Hiện tại, tôi đang lội qua các bố cục. Trong khi Bootstrap khá tuyệt, mọi thứ tôi thấy dường như đã cũ. Đối với cuộc sống của tôi, tôi có những gì tôi nghĩ là một bố cục cơ bản mà tôi không thể tìm ra. Bố cục của tôi trông như sau:

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

Lưới này cần phải chiếm toàn bộ chiều cao của cửa sổ. Từ sự hiểu biết của tôi, tôi cần trộn chiều rộng cố định và chất lỏng. Tuy nhiên, Bootstrap 3.0 dường như không còn lớp chất lỏng nữa. Ngay cả nếu có, tôi dường như không thể tìm ra cách trộn chất lỏng và kích cỡ cột cố định. Có ai biết làm thế nào để làm điều này trong Bootstrap 3.0 không?

Thực sự không có cách nào dễ dàng để trộn chất lỏng và độ rộng cố định với Bootstrap 3. Nó có nghĩa là như thế này, vì hệ thống lưới được thiết kế để trở thành một thứ linh hoạt, nhạy bén. Bạn có thể thử hack một cái gì đó, nhưng nó sẽ đi ngược lại những gì hệ thống Responsive Grid đang cố gắng thực hiện, mục đích của nó là làm cho bố cục đó chảy qua các loại thiết bị khác nhau.

Nếu bạn cần tuân theo bố cục này, tôi sẽ xem xét việc bố trí trang của bạn bằng CSS tùy chỉnh và không sử dụng lưới.

chỉnh sửa: Vì nhiều người dường như muốn làm điều này, tôi đã viết một hướng dẫn ngắn với trường hợp sử dụng chung hơn ở đây https://www.atlascode.com/bootstrap-fixed-ference-sidebars/ . Hy vọng nó giúp.

Hệ thống lưới bootstrap3 hỗ trợ lồng hàng cho phép bạn điều chỉnh hàng gốc để cho phép các menu bên có chiều rộng cố định.

Bạn cần đặt một phần đệm bên trái trên hàng gốc, sau đó có một hàng con chứa các thành phần bố cục lưới bình thường của bạn.

Đây là cách tôi thường làm điều này 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;
}

hoặc sử dụng thuộc tính hiển thị với ô bảng;

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/

Tôi đã có một vấn đề hơi khác:

• Tôi cần kết hợp các cột cố định và chất lỏng như một phần của bảng chứ không phải là một phần của bố cục toàn cửa sổ
• Tôi cần phải cố định các cột ở cả bên trái và bên phải
• Tôi không lo lắng về các nền cột sử dụng toàn bộ chiều cao của hàng chứa

Kết quả là, tôi đã dùng đến floatcác cột bên trái và bên phải, và sau đó có thể sử dụng Bootstrap rowđể thực hiện các cột chất lỏng ở giữa.

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

Cập nhật 2018

IMO, cách tốt nhất để tiếp cận điều này trong Bootstrap 3 sẽ là sử dụng các truy vấn phương tiện phù hợp với các điểm dừng của Bootstrap để bạn chỉ sử dụng các cột có chiều rộng cố định là các màn hình lớn hơn và sau đó để bố cục xếp chồng đáp ứng trên các màn hình nhỏ hơn. Bằng cách này bạn giữ được khả năng phản hồi ...

@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 sẽ có flexbox nên bố cục như thế này sẽ dễ dàng hơn nhiều: http://www.codeply.com/go/eAYKvDkiGw

OK, câu trả lời của tôi là siêu tốt đẹp:

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

sân chơi jsfiddle

nếu bạn muốn hỗ trợ cho tất cả trình duyệt, hãy sử dụng https://github.com/10up/flexibility

CẬP NHẬT 2014-11-14: Giải pháp dưới đây quá cũ, tôi khuyên bạn nên sử dụng phương pháp bố trí hộp flex. Dưới đây là tổng quan: http://learnlayout.com/flexbox.html

Giải pháp của tôi

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

Không sửa đổi quá nhiều mã bố trí bootstrap.

Cập nhật (không phải từ OP): thêm đoạn mã dưới đây để tạo điều kiện hiểu câu trả lời này. Nhưng nó dường như không hoạt động như mong đợi.

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>

Tại sao không chỉ đặt hai cột bên trái thành cố định trong css của riêng bạn và sau đó tạo bố cục lưới mới của 12 cột đầy đủ cho phần còn lại của nội dung?

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