Я хочу, чтобы меню переключения отображалось с @ 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) { … }

Если вы хотите переопределить самозагрузки CSS, лучше поставить эту норму (выше) после начальной загрузки. css загружает. Проверьте в режиме dev, если ваше правило получает избыточность при загрузке.

Docs в w3.org

Answer 2

Yep, вы должны использовать медиазапросы. Добавьте это в .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;} 
     }