Раскрывающееся меню для планшета

Question

Как наложить @media на планшет шириной 991px? Я уже являюсь файлом CSS, который работает для мобильных телефонов, но при переключении на планшеты весь css отличается. Как я могу применить тот же CSS для планшета, что и для мобильных телефонов в раскрывающемся меню?

Я попытался это для CSS:

@media (max-width: 991px) { 
.navbar-header { 
    float: none; 
} 
.navbar-toggle { 
    display: block; 
} 
.navbar-collapse.collapse { 
    display: none !important; 
} 
.navbar-nav>li { 
    float: none; 
    background: black; 
} 
.navbar-text { 
    float: none; 
    margin: 15px 0; 
} 
.navbar-collapse.collapse.in { 
    display: block !important; }} 

Вот Plunker. Здесь я хочу, чтобы утонувшее меню работало на ширину до 991 пикселей, но оно работает до ширины 768 пикселей. Как это изменить?

Answer 1

изменить classs вашего Div в

collapse navbar-collapse col-lg-6 col-md-6 col-sm-12 col-xs-7 pull-right 

с коллапс Navbar коллапса Col-LG-6 цв-мкр-6 цв-см-12 Col-хз-12

изменения в классе

.navbar-collapse.collapse.in { 
display: block !important; 
margin-left: 0; 
} 

Answer 2

использовать следующий запрос медиа для планшета, чтобы применить тот же CSS

/* Landscape tablets and medium desktops */ 

@media (min-width: 992px) and (max-width: 1199px) { 
.navbar-header { 
     float: none; 
    } 
    .navbar-toggle { 
     display: block; 
    } 
    .navbar-collapse.collapse { 
     display: none !important; 
    } 
    .navbar-nav>li { 
     float: none; 
     background: black; 
    } 
    .navbar-text { 
     float: none; 
     margin: 15px 0; 
    } 
    .navbar-collapse.collapse.in { 
     display: block !important; 
    } 
}