平板电脑的下拉菜单

Question

991px宽的平板如何申请@media？我已经有适用于手机的 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

对平板电脑使用以下媒体查询以应用相同的 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;
    }
}

Answer 2

更改 div 的类

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

与 折叠导航栏-折叠 col-lg-6 col-md-6 col-sm-12 col-xs-12

换班

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