我希望切换菜单从@468 出现到@1000px

Question

我希望移动菜单从@media468px 显示到@media1000px，可以吗？我尝试更改一些值，但不起作用。我在“bootstrap.css”经典文件中找不到要修改的正确行。我想发布整个文件，但是太长了。

感谢大家对我英语不好的关注和借口。

.navbar-default .navbar-toggle .icon-bar 
{background-color: #bc2132;
box-shadow: 1px 1px #000;}

.navbar-toggle 
{background-color: transparent;
border: none;}

.navbar-toggle:hover 
{background-color: transparent! important;}

.navbar-toggle:focus 
{background-color: transparent! important;}

.navbar-default
{background-color: #222;
border-color: transparent;}

.navbar-default .navbar-nav>li>a
{color: #FFF;
text-shadow: 1px 1px #000;}

.navbar-default .navbar-nav>li>a:focus, .navbar-default .navbar-nav>li>a:hover
{color: #bc2132;}

.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover
{background-color: yellow;}

.navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:focus, .navbar-default .navbar-nav>.open>a:hover
{background-color: blue;}

.dropdown-menu>li>a
{color: green;}

.dropdown-menu>li>a:hover
{background-color: brown;
color: violet;}

.navbar-brand>li>a:hover
{color: white;}

@media only screen and (max-width: 766px) {
.collapsing, .in {background: #222;}
.collapsing ul li a, .in ul li a {color: #fff!important; float: left;}
.collapsing ul li a:hover, .in ul li a:hover {color: #fff !important; background-color: #E1332D;}
}


.navbar {
    -webkit-transition: all 0.6s ease-out;
    -moz-transition: all 0.6s ease-out;
    -o-transition: all 0.6s ease-out;
    -ms-transition: all 0.6s ease-out;
    transition: all 0.6s ease-out;
}

.navbar.scrolled {
    background: rgb(68, 68, 68); //IE
    background: rgba(0, 0, 0, 0.78); //NON-IE
}

li 
{text-transform: uppercase;
font-size: 13px;
font-family: 'PT Sans', sans-serif;}

Answer 1

您可以使用媒体查询

例如： @media screen and (min-width: 468px) and (max-width: 1000px) { … }

如果您想覆盖 bootstrap css，最好在 bootstrap.css 加载后放置该规则（如上）。如果您的规则被引导程序覆盖，请检查开发模式。

文档w3.org

Answer 2

是的，您应该使用媒体查询。将此添加到您的 .css 文件中：

    @media (max-width:1000px) and (min-width:468px) {
        .navbar-default .navbar-toggle .icon-bar 
        {background-color: #bc2132;
        box-shadow: 1px 1px #000;}

        .navbar-toggle 
        {background-color: transparent;
        border: none;}

        .navbar-toggle:hover 
        {background-color: transparent! important;}

        .navbar-toggle:focus 
        {background-color: transparent! important;}

        .navbar-default
        {background-color: #222;
        border-color: transparent;}

        .navbar-default .navbar-nav>li>a
        {color: #FFF;
        text-shadow: 1px 1px #000;}

        .navbar-default .navbar-nav>li>a:focus, .navbar-default .navbar-nav>li>a:hover
        {color: #bc2132;}

        .navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover
        {background-color: yellow;}

        .navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:focus, .navbar-default .navbar-nav>.open>a:hover
        {background-color: blue;}

        .dropdown-menu>li>a
        {color: green;}

        .dropdown-menu>li>a:hover
        {background-color: brown;
        color: violet;}

        .navbar-brand>li>a:hover
        {color: white;}    

        .navbar {
            -webkit-transition: all 0.6s ease-out;
            -moz-transition: all 0.6s ease-out;
            -o-transition: all 0.6s ease-out;
            -ms-transition: all 0.6s ease-out;
            transition: all 0.6s ease-out;
        }

        .navbar.scrolled {
            background: rgb(68, 68, 68); //IE
            background: rgba(0, 0, 0, 0.78); //NON-IE
        }

        li 
        {text-transform: uppercase;
        font-size: 13px;
        font-family: 'PT Sans', sans-serif;}
        }​
    }

        @media only screen and (max-width: 766px) {
        .collapsing, .in {background: #222;}
        .collapsing ul li a, .in ul li a {color: #fff!important; float: left;}
        .collapsing ul li a:hover, .in ul li a:hover {color: #fff !important; background-color: #E1332D;}
        }