Có thể có hệ thống lưới chất lỏng hỗn hợp/chất lỏng không?

Question

Sử dụng bootstrap 2, phương pháp đơn giản nhất để có cột chiều rộng tĩnh ở bên trái và cột phải là chất lỏng. Một cái gì đó như thế này với cột 200 chiều rộng bên trái và bên phải để điền vào cửa sổ trình duyệt.

====================== 
Hello 
====================== 
A | 
B |  100% 
200px| 
D | 
E | 
F | 

tôi đã cố gắng thêm một min-width để bố trí container thường xuyên nhưng nó có một số hành vi kỳ lạ khi thay đổi kích thước:

<div class="container-fluid"> 

    <div class="row-fluid"> 
     <div class="span12">Hello</div> 
    </div> 

    <div class="row-fluid"> 
     <div class="span2" style="min-width:200px">Left Column</div> 
     <div class="span10">Right Column</div> 
    </div> 

</div> 

Đây là một fiddle JS cũng mặc dù bố trí quad của fiddle js bản thân dường như thêm hành vi riêng của mình.

http://jsfiddle.net/BVmUL/882/

Answer 1

Câu trả lời ngắn cho câu hỏi của bạn là NO. Bootstrap 2 sử dụng các truy vấn phương tiện truyền thông và các biện pháp phần trăm để đạt được bố trí lưới đáp ứng của chúng. Cố gắng tạo ra một phương pháp lai sử dụng Bootstrap 2 là hoàn toàn dư thừa.

Bạn có thể thử phương pháp này. Sử dụng float:left; ở cột bên trái và đưa ra một padding-left:200px; vào cột bên phải và chính xác. Bạn đã vẽ bố cục của mình. Đã thêm clearfix ở dưới cùng để bạn có thể sử dụng chân trang trong tương lai nếu muốn. Bằng cách này, bạn tiếp tục hỗ trợ cho hầu hết các trình duyệt.

Kiểm tra JsFiddle Demo

HTML

<div class="container-fluid"> 

    <div class="row-fluid"> 
     <div class="span12 header">Hello</div> 
    </div> 

    <div class="row-fluid"> 
     <div class="span2 left-col">Left Left Left Left Left Left Left</div> 
     <div class="span10 right-col">Right Right Right Right Right Right Right </div> 
    </div> 

</div> 
    <div class="clearfix"></div> 

CSS

.header{ 
    background-color:#f00; 
} 
.left-col{ 
    background-color:#0f0; 
    float:left; 
    width:200px; 
    height:400px; 
} 
.right-col{ 
    background-color:#00f; 
    height:400px; 
    padding-left:200px; 
} 

Sau đó bạn có thể sử dụng Javascript để tự động điều chỉnh độ rộng cột bên trái và cột đệm chuột phải vào cửa sổ thay đổi kích thước.

Bạn cũng có thể muốn xem xét các lựa chọn thay thế sau:

1. Calc() (IE9 + chỉ)

Nếu bạn không quan tâm đến IE8- hỗ trợ này là cách dễ nhất để đạt được nó. Bạn có thể học cách here

2. Truyền thông Queries (IE9 chỉ +)

Bạn có thể sử dụng Media Queries giống như Bootstrap không nhưng bạn không thể sử dụng các biện pháp percentual để đạt được những gì bạn đang tìm kiếm. Bạn có thể sử dụng nó để thay đổi các giá trị thuộc tính css và làm cho nó đáp ứng (với các hạn chế tùy chỉnh của bạn) theo cách đó.

3. Flexbox (IE10 chỉ + (một phần IE9))

Sẽ là tuyệt vời nhưng không được khuyến khích cho bây giờ vì hỗ trợ trình duyệt.

4. Bàn

Hãy this thread biết tại sao bạn không nên sử dụng nó.

Answer 2

Vì vậy, về cơ bản bạn muốn cột bên phải để phù hợp với không gian có sẵn.

Bạn có 5 tùy chọn mà không phải là đặc trưng cho bootstrap nhưng nói chung HTML/CSS:

1) sử dụng calc

.left-col { 
     width: 200px; 
    } 
    .right-col { 
     width: calc(100% - 200px); 
    } 

Đó rõ ràng là không bao gồm IE8 và browsers that do not support calc khác.

2) sử dụng phao Tôi không nghĩ về điều đó. Kiểm tra @henser's answer cho điều đó. Dường như làm việc khá tốt mặc dù tôi đã có ấn tượng rằng các col phải sẽ phá vỡ nếu không có đủ không gian có sẵn cho nội dung của nó. Rõ ràng tôi đã sai - đây có vẻ là phương pháp tốt nhất nếu bạn muốn hỗ trợ các trình duyệt cũ hơn.

3) sử dụng flexbox Đó là công việc nhiều hơn một chút và có thể phức tạp nhưng tôi có thể đề xuất this great guide để bắt đầu với flexbox. Điều đó rõ ràng là excludes old IE versions.

4) sử dụng bảng Xấu xí, không thực sự được đề xuất nhưng nó hỗ trợ tất cả trình duyệt.

5) Javascript bạn có thể sử dụng JavaScript để tính dung lượng còn lại. Nhưng điều đó tất nhiên cần phải được kích hoạt thay đổi kích thước. Không được khuyến cáo vì nó không nhanh như các tùy chọn khác.

// jQuery example 
$('.right-col').width($(window).width() - $('.left-col').width());