Hiển thị thanh bên của bảng điều khiển Bootstrap hiển thị/khả dụng trên thiết bị di động

Question

Ẩn hoàn toàn thanh điều hướng bên cạnh (không bị thu gọn hoặc xếp chồng) khi chiều rộng màn hình nhỏ hơn 768px. Làm thế nào bạn sẽ đi về hỗ trợ điện thoại di động với một thiết lập như vậy?

Answer 1

Các CSS cho sidebar tại 'lớn hơn' xem điện thoại di động được quy định tại:

@media (min-width: 768px) 
    .sidebar { 
     position: fixed; 
     top: 51px; 
     bottom: 0; 
     left: 0; 
     z-index: 1000; 
     display: block; 
     padding: 20px; 
     overflow-x: hidden; 
     overflow-y: auto; 
     background-color: #f5f5f5; 
     border-right: 1px solid #eee; 
    } 

Sau đó nó lại trở về mặc định của display:none

.sidebar { 
    display: none; 
} 

Bạn sẽ cần phải thay đổi nó CSS mặc định hoặc thêm media query mới, ví dụ:

@media (max-width: 768px)

Để nhắm tới các thiết bị nhỏ hơn. Loại kiểu dáng bạn muốn áp dụng sẽ tùy thuộc vào những gì bạn đang theo dõi.

Answer 2

Một tùy chọn khác là kết hợp Trang tổng quan và mẫu thanh bên "off-canvas". Cách bố trí này cho phép các bên được toggled tắt/trên màn hình cùng độ rộng nhỏ hơn ...

http://bootply.com/128936

@media screen and (max-width: 768px) { 
    .row-offcanvas { 
    position: relative; 
    -webkit-transition: all 0.25s ease-out; 
    -moz-transition: all 0.25s ease-out; 
    transition: all 0.25s ease-out; 
    } 

    .row-offcanvas-left 
    .sidebar-offcanvas { 
    left: -33%; 
    } 

    .row-offcanvas-left.active { 
    left: 33%; 
    } 

    .sidebar-offcanvas { 
    position: absolute; 
    top: 0; 
    width: 33%; 
    margin-left: 10px; 
    } 
} 


/* Sidebar navigation */ 
.nav-sidebar { 
    background-color: #f5f5f5; 
    margin-right: -15px; 
    margin-bottom: 20px; 
    margin-left: -15px; 
} 
.nav-sidebar > li > a { 
    padding-right: 20px; 
    padding-left: 20px; 
} 
.nav-sidebar > .active > a { 
    color: #fff; 
    background-color: #428bca; 
}