Wyświetlanie paska bocznego pulpitu sterowania Bootstrap jest widoczne/dostępne na urządzeniu mobilnym

Question

Po całkowitym ukryciu ekranu o szerokości ekranu mniejszej niż 768 pikseli obraz Boostrap dashboard example całkowicie ukrywa nawigację po pasku bocznym (nie jest zwinięty ani ułożony). Co byś powiedział na temat obsługi urządzeń mobilnych przy takiej konfiguracji?

Answer 1

CSS na pasku bocznym na „większe niż” widoku mobilnym jest określony w:

@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; 
    } 

po czym powraca do swojej niewypłacalności display:none

.sidebar { 
    display: none; 
} 

Trzeba by albo zmienić jego domyślny CSS lub dodaj nowy media query, np

@media (max-width: 768px)

W celu specjalnie kierować mniejszych urządzeń. Rodzaj stylizacji, którą chcesz zastosować, zależy od tego, czego szukasz.

Answer 2

Inną opcją jest połączenie pulpitu nawigacyjnego i szablonowych szablonów paska bocznego. Ten układ pozwala sidebar być wyłączane/na ekranie w mniejszych szerokościach ...

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; 
}