Question

我希望移动菜单从@ media468px显示到@ media1000px，它可能吗？我试图改变一些价值，但不起作用。我没有在＆＃34; bootstrap.css＆＃34;中找到要修改的正确行。经典文件。我想发布整个文件，但是太长了。

感谢所有人对我糟糕的英语的关注和借口。

＆＃13;

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

＆＃13;

Answer 1

您可以使用媒体查询

以身作则： @media screen and (min-width: 468px) and (max-width: 1000px) { … }

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

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

我想切换菜单从@ 468到@ 1000px

2 个答案: