Cách tốt nhất để tạo phản hồi Bootstrap dựa trên div cha?

Question

Tôi cần một thùng chứa trong bootstrap để đáp ứng dựa trên div cha mẹ thay vì truy vấn phương tiện. Tôi không thể tìm ra cách tốt nhất mà không làm điều đó, đặc biệt là không sử dụng javascript, nếu có thể. Hiện tại, về thay đổi kích thước, tôi được tính nếu .span* divs phải là 100% chiều rộng (nếu div cha mẹ kết thúc dưới 640px) hoặc tôn trọng CSS columning.

Đây là một jsfiddle. Với CSS trên .somecontainer bố cục bên trong của .span* nên bố cục như thể đó là thiết bị di động - vì vậy mỗi cột phải có chiều rộng đầy đủ, nếu bạn thay đổi CSS thành trên 640px, chẳng hạn, nó sẽ bố trí lại bố cục cột.

Bất kỳ ý tưởng nào?

Hiện nay sử dụng mã tương tự như sau (mà không phải là lý tưởng)

$(document).ready(function(){ 
    $('.somecontainer').on('resize',function(){ 
    if ($('.somecontainer').width() < 640) { 
     $('.somecontainer').addClass('m'); 
    } else { 
     $('.somecontainer').removeClass('m'); 
    }); 
}); 

http://jsfiddle.net/tsdexter/ArqUR/1/

Cảm ơn, Thomas

Answer 1

Bằng việc sử dụng elementQuery polyfill bạn sẽ có thể thực hiện điều này. Đây là số repo on gitHub, ở đây là an article on Smashing Magazine giải thích thêm về khái niệm và đây là tác giả được tạo ra để minh họa cách sử dụng nó.

Về cơ bản, bạn sử dụng CSS để xác định điểm ngắt dựa trên div gốc. Dưới đây là một ví dụ về cú pháp:

header[min-width~="500px"] { 
    background-color: #eee; 
} 

Dưới đây là một trích dẫn có liên quan từ Smashing Điều:

Giới thiệu về truy vấn nguyên tố. Truy vấn phần tử tương tự như truy vấn phương tiện trong đó, nếu điều kiện được đáp ứng, một số CSS sẽ được áp dụng. Điều kiện truy vấn phần tử (chẳng hạn như chiều rộng tối thiểu, chiều rộng tối đa, chiều cao tối thiểu và chiều cao tối đa) dựa trên các yếu tố, thay vì trình duyệt.