Làm thế nào để làm cho chỉ có một chất lỏng cột trong bootstrap

Question

Sau đây là cấu trúc của cách bố trí của tôi trong Bootstrap 3.2:

<div class="container-fluid"> 
    <div class="row"> 
     <div class="col-xs-3"> 
      <!-- I want this column to be fixed. --> 
     </div> 
     <div class="col-xs-6"> 
      <!-- I want only this column to be fluid. --> 
     </div> 
     <div class="col-xs-3"> 
      <!-- I want this column to be fixed. --> 
     </div> 
    </div> 
</div> 

Như bạn có thể thấy trong psuedo mã ý kiến, tôi muốn chỉ cột ở giữa là chất lỏng theo kích thước màn hình.

Có thể trong container-fluid thời trang của Bootstrap không? Hay tôi nên đi qua những cách khác?

Answer 1

Không có "cách khởi động" để có các cột có chiều rộng cố định. Vì vậy, chúng ta có thể sử dụng CSS để làm những gì bạn muốn trong một vài cách

1. Sử dụng flexbox (cách tốt nhất) - Demo.

.row { 
    display: flex; 
} 
.fixed-side-column { 
    width: 250px; 
} 
.fluid-middle-column { 
    flex-grow: 1; 
} 

2. Sử dụng calc() (hoặc tương đương JavaScript) giữ trong tâm trí browser support - Demo

.row > div { 
    float:left; /* Could also use display: inline-block. */ 
} 
.fixed-side-column { 
    width:250px; 
} 
.fluid-middle-column { 
    width:calc(100% - 500px); 
} 

3. Sử dụng định vị tuyệt đối và padding trên các yếu tố trung để loại bỏ sự cần thiết đối với bất kỳ tính toán - Demo

Bạn sẽ phải thay đổi đánh dấu một số

<div class="container-fluid"> 
<div class="row"> 
    <div class="fluid-middle-column"> 
     <!-- I want only this column to be fluid. --> 
    </div> 
    <div class="fixed-side-column"> 
     <!-- I want this column to be fixed. --> 
    </div>  
    <div class="fixed-side-column right"> 
     <!-- I want this column to be fixed. --> 
    </div> 
    </div> 
</div> 

/* CSS */ 
.fixed-side-column { 
    width:250px; 
    float:left; 
} 
.right { 
    float:right; 
} 
.fluid-middle-column { 
    position:absolute; 
    z-index:-1; 
    top:0; 
    left:0; 
    width:100%; 
    padding: 0 250px 0 250px; 
} 

Bạn sẽ cần thêm truy vấn phương tiện tùy chỉnh để xử lý những gì xảy ra khi màn hình trở nên nhỏ.