Thu gọn div/phần tử trên màn hình thiết bị di động chỉ bằng bootstrap. Ví dụ pic

Question

Có thể thu gọn div bên - chỉ trên điện thoại di động - sử dụng bootstrap không? Làm thế nào tôi sẽ đi về làm một cái gì đó giống như ví dụ trong hình ảnh? Vì vậy, trên điện thoại di động, thanh bên bị thu hẹp và khi được nhấp, mở rộng. Tôi không hiểu làm thế nào các truy vấn phương tiện truyền thông sẽ cho phép tôi làm điều này bởi vì các jquery tham gia.

http://i46.tinypic.com/2mzxflu.jpg

Đã thấy một số câu hỏi tương tự ở đây nhưng không chính xác như thế này. Ai đó có thể giải thích hoặc ít nhất là chỉ cho tôi đi đúng hướng? Cảm ơn trước.

Answer 1

Cách nhanh chóng và bẩn: có thể viết mã cho thanh bên kích thước đầy đủ mà bạn muốn hiển thị trên màn hình máy tính và đánh dấu riêng cho thanh bên thu gọn để hiển thị trên thiết bị di động.

Sau đó, để chọn thời điểm hiển thị phiên bản của thanh bên, hãy sử dụng classes provided by bootstrap để ẩn và hiển thị nội dung dựa trên truy vấn phương tiện.

sidebar Đã thu gọn: .hidden-desktop .hidden-tablet .visible-phone

Full sidebar: hidden-phone .visible-tablet .visible-desktop

Answer 2

tôi đã cùng một vấn đề sử dụng Bootstrap V3. Tôi đã làm theo hướng dẫn trên tài liệu chính thức, nhưng không thể có được thanh bên để thu gọn theo mặc định trên điện thoại di động.

Điều này xuất phát từ lỗi trong tệp nguồn Bootstrap V3 (phiên bản tùy chỉnh được tạo vào ngày 2013/09/05). Chỉ cần tải CSS sau ngay sau bản bootstrap.css gốc:

.collapse{display:none}.collapse.in{display:block}.collapsing{position:relative;height:0;overflow:hidden;-webkit-transition:height .35s ease;transition:height .35s ease} 
@media screen and (min-width:768px){.nav-collapse.collapse{display:block!important;height:auto!important;overflow:visible!important}} 

(Các kiểu này đến từ phiên bản trước của nguồn Bootstrap V3 gốc).

Nếu không, lỗi duy nhất của tôi là khởi chạy trình cắm thêm thu gọn trong trang HTML của tôi. Vì vậy, nếu bạn đã có một cái gì đó như thế này trong mã nguồn HTML của bạn:

<script type="text/javascript"> 
    $(document).ready(function(){ 
     $('.collapse').collapse(); 
    }); 
</script> 

... sau đó chỉ cần xóa nó và plug-in thu gọn sẽ hoạt động như một nét duyên dáng.

Answer 3

tôi đã kết thúc tình cờ gặp phải vấn đề này và bổ sung thêm một lớp CSS cho nó:

.collapse-non-md { 
    height: 0; 
    display: none; 
} 
.collapse-non-md.collapsing { 
    display: block; 
} 

@media (min-width: 992px) { 
    .collapse-non-md { 
     height: auto; 
     display: block; 
    } 
} 

Sau đó, tôi thiết lập các lớp học của phần tử tôi muốn sụp đổ trên màn hình bên dưới trung bình đến collapse-non-md và thì đấy, nó sụp đổ trên nhỏ các trình duyệt và mở trên các trình duyệt trung bình. Nó vẫn có thể được mở và đóng theo cách thông thường (số .in ghi đè .collapse-non-md).