Cột chiều rộng cố định với bình chứa chất lỏng trong bootstrap

Question

Tôi đang cố gắng tìm một giải pháp để có một cột bên trái ở bên trái với chiều rộng cố định, và sau đó, ở bên phải bình chứa chất lỏng bootstrap bình thường.

Ngay cả khi thanh bên không nằm trong cấu trúc bootstrap thì vẫn ổn. Tôi có nghĩa là nó đã không được với lớp col-xx-xx.

Bất cứ điều gì tôi làm vấn đề chính là tôi không quản lý để làm cho các thùng chứa chất lỏng nằm bên cạnh thanh bên.

Điểm cũng là nếu tôi hiển thị không có thanh bên, vùng chứa chất lỏng phải sử dụng toàn bộ chiều rộng của trang.

Cảm ơn bạn đã nâng cao để được hỗ trợ.

Answer 1

Hãy thử bao gồm container-fluid của bạn trong một div với margin-left: 200px (trong đó 200px là chiều rộng của thanh bên).

Sau đó, vị trí của thanh bên của bạn với position: absolute ví dụ

Answer 2

Một bố trí cố định chất lỏng là possible in Bootstrap 3, nhưng bây giờ mà Bootstrap 4 có flexbox nó là dễ dàng hơn nhiều. Bạn chỉ cần bật flexbox, và thực hiện một vài điều chỉnh đơn giản để thiết lập độ rộng của cột bên cố định của bạn flex: 0 0 300px;, và sau đó flex: 1; trên cột chính của bạn để điền rộng còn lại ...

Bootstrap 4 Alpha 2 http://codeply.com/go/eAYKvDkiGw

Dưới đây là một bản cập nhật đơn giản hơn cho Bootstrap mới nhất 4 đó là flexbox theo mặc định:

Bootstrap 4 Alpha 6 hoặc Beta http://codeply.com/go/V9UQrvLWwz

@media (min-width: 576px) { 
    .sidebar { 
      max-width: 280px; 
    } 
} 

<div class="container-fluid"> 
    <div class="row flex-nowrap"> 
     <div class="col-md-4 col-12 sidebar"> 

     </div> 
     <div class="col-md col-12 main"> 
      <h2>Main (fluid width...)</h2> 
     </div> 
    </div> 
</div> 

Xem thêm: How to build a 2 Column (Fixed - Fluid) Layout with Twitter Bootstrap?

Update 2018 Bootstrap 4.0.0 example