Twitter Bootstrap 2: Cách lấy thiết kế đáp ứng để đặt thanh bên ở dưới cùng thay vì trên cùng?

Question

Twitter's Bootstrap 2 cuối cùng đã thêm thiết kế phản hồi gốc. Tuy nhiên, theo mặc định khi chiều rộng của trình duyệt thấp hơn chiều rộng tối thiểu, nó đặt thanh bên trên cùng. Tôi có thể thấy cách này sẽ làm việc cho nhiều trang web, nhưng tôi thực sự muốn thanh bên ở dưới cùng trên bố cục chiều rộng nhỏ.

Tôi là người mới sử dụng Twitter Bootstrap và đã cố gắng tìm ra phần nào của CSS trong bootstrap-response.css, nhưng tôi không thấy bất kỳ điều gì trong phần cho @media (max-width: 480px).

Tôi đã xem tài liệu về Bootstrap cho số responsive design và không có nhiều chi tiết về nó.

Rất thích một số gợi ý ...

Answer 1

Bạn có thể đạt được hiệu ứng này bằng cách lật các container cho thanh bên và khu vực nội dung và chỉ nổi họ theo cách bạn muốn. Điều này có thể được thực hiện sạch mà không rối tung xung quanh quá nhiều với kiểu bootstrap bằng cách gán id của riêng bạn để thanh bên và khu vực nội dung và làm một cái gì đó như thế này:

CSS

.sidebar-nav { 
    padding: 9px 0; 
    width:100%; 
} 

#sidebar { 
    float:left; 
    margin-left:0; 
} 

#content { 
    float:right !important; 
    margin-left:auto; 
} 

@media (max-width: 767px) { 
    #sidebar { 
     display: inline-block; 
     margin-top: 20px; 
     width: 100%; 
    } 

    #content { 
     float:none !important; 
     margin-left:0; 
    } 
} 

Sau đó, tất cả các bạn phải làm là lật div container như vậy:

<div id="content" class="span9"> ... </div> /* item you want up top first */ 
<div id="sidebar" class="span3"> ... </div> /* last item to be rendered below */ 

Demo: http://jsfiddle.net/andresilich/YEUwN/1/show/ Sửa đây: http://jsfiddle.net/andresilich/YEUwN/1/

Answer 2

Nó có thể dễ dàng.

// Pull right sidebar to top 
<div class="row"> 
    <div class="span3 pull-right">Right sidebar</div> 
    <div class="span9">Content section</div> 
</div> 

// Or pull left sidebar to bottom side 
<div class="row"> 
    <div class="span9 pull-right">Content section</div> 
    <div class="span3">Left Sidebar</div> 
</div> 

Answer 3

Không một giải pháp tối ưu, nhưng đây là cách tôi đã làm nó:

<script type="text/javascript"> 
$(window).resize(function() { 
    if ($(window).width() < 768) { 
     $(".sidebar").insertAfter(".main"); 
    } 
    else{ 
     $(".main").insertAfter(".sidebar"); 
    } 
}); 

$(document).ready(function(){ 
    if ($(window).width() < 768) { 
     $(".sidebar").insertAfter(".main"); 
    } 
}); 
</script> 

Answer 4

này là dành cho Andres Ilich người đã trả lời câu hỏi này. Tôi không thấy cách để đưa ra nhận xét ở trên hoặc liên hệ trực tiếp với anh ấy. Vì vậy, tôi xin lỗi những người kiểm duyệt.

Để làm cho chuỗi này hữu ích hơn, tôi muốn biết ý nghĩa của "Sau đó, tất cả những gì bạn phải làm là lật các div vùng chứa như sau:" Các div vùng chứa bị lộn ngược như thế nào? Bản demo/chỉnh sửa mã vẫn chưa rõ ràng đối với một người như tôi, người không quen thuộc với kỹ thuật đó. Tôi không thể hiểu được nó đang làm gì và nó hoạt động như thế nào. Nó gần giống như một số javascript đang hành động trên đó. Lý tưởng nhất, sẽ có một ví dụ xương trần chỉ với hai div và tối thiểu css chỉ ra trên đó dòng css (s) các "flip" diễn ra.

Nếu có ai có thời gian để xây dựng, tôi sẽ đánh giá cao điều đó.

Answer 5

Tôi đã tạo lưới "tiện ích mở rộng" để cho phép đặt hàng nguồn cho lưới chất lỏng - nó có thể được tối ưu hóa nhưng thực hiện công việc. Chỉ cần sử dụng col-pull-# & col-push-# (trong đó # là số cột bạn muốn kéo/đẩy). Ngoài ra, để ghi đè lề cho phần tử đầu tiên, hãy thêm một lớp của first vào phần tử mà bạn muốn xuất hiện đầu tiên trong hàng. Xem bản trình diễn và nhận HTML/CSS/LESS tại đây:

http://jsfiddle.net/NGuL2/3/embedded/result/