Bootstrap：自定义媒体查询

Question

我想为900到1023px实现以下样式

.navbar-brand {
    float: left;
    margin-right: 5px;
    margin-left: -15px

}
.navbar-nav {
    float: left;
    margin-top: 0;
    margin-bottom: 0
}
.navbar-nav>li {
    float: left
}
.navbar-nav>li>a {
    border-radius: 0
}
.navbar-nav.pull-right {
    float: right;
    width: auto;
    margin:10px 0 ; 

}
.navbar-toggle {
    position: relative;
    top: auto;
    left: auto;
    display: none
}
.nav-collapse.collapse {
    display: block!important;
    height: auto!important;
    overflow: visible!important
}

我应用了以下媒体查询

 @media screen (min-width: 900px) and (max-width: 1024px) { 

// here goes above code 

}

但问题是这些stlyes也被应用于1300 +分辨率。什么错了请帮忙

Answer 1

在and

之后，您错过了@media screen

@media screen and (min-width: 900px) and (max-width: 1024px) { 

// here goes above code 

}