My bootstrap navbar collapse breakpoint wont change

Я пытаюсь сделать мой загрузочный navbar сбой, если ширина веб-страницы меньше 1024 пикселей, но она обрушивается под ширину 700ish пикселей. Я пробовал много решений, которые я googeled, но не повезло. Я пробовал CSS из этого сообщения «Bootstrap 3 Navbar Collapse» у него есть проблема, похожая на мою. Но независимо от того, что я делаю, я просто не рушится после ширины 1024 пикселя. Я попытался скопировать их html (boostrap navbar) + css, чтобы убедиться, что это будет работать, но не повезло.My bootstrap navbar collapse breakpoint wont change

Мой CSS

@media (max-width: 1024px) { 
    ul.nav.navbar-nav{ 
    margin-left:-15px; 
} 
    .navbar-header { 
     float: none; 
    } 
    .navbar-left,.navbar-right { 
     float: none !important; 
    } 
    .navbar-toggle { 
     display: block; 
    } 
    .navbar-collapse { 
     border-top: 1px solid transparent; 
     box-shadow: inset 0 1px 0 rgba(255,255,255,0.1); 
    } 
    .navbar-fixed-top { 
     top: 0; 
     border-width: 0 0 1px; 
    } 
    .navbar-collapse.collapse { 
     display: none!important; 
    } 
    .navbar-nav { 
     float: none!important; 
     margin-top: 7.5px; 
    } 
    .navbar-nav>li { 
     float: none; 
    } 
    .navbar-nav>li>a { 
     padding-top: 10px; 
     padding-bottom: 10px; 
    } 
    .collapse.in{ 
     display:block !important; 
    } 
}

Мои Bootstrap Navbar

<nav> 
<img class="kopakuttlogo" src="kopakuttlogo.jpg" alt="Logo" width="400" height="400"/> 
<div class="navigatsioon"> 
<div class="navbar navbar-default" role="navigation"> 
     <div class="container"> 
    <!-- Brand and toggle get grouped for better mobile display --> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 

    </div> 
    </div> 


<div class="container-fluid"> 
    <!-- Collect the nav links, forms, and other content for toggling --> 
    <div class="navbar-collapse collapse"> 
     <ul class="nav navbar-nav"> 
      <li><a href="http://www.haaboja.ee/" class="active">AVALEHT</a></li> 
     <li><a href="Hinnakiri.php">HINNAKIRI</a></li> 
     <li><a href="Renditingimused.php">RENDITINGIMUSED</a></li> 
     <li><a href="tehnika.php">TEHNIKA</a></li> 
     <li><a href="kontakt.php"></span>KONTAKT</a></li> 
     </ul> 



     </li> 
     </ul> 
     </div><!-- /.navigatsioon --> 
     </div> 
    </div><!-- /.navbar-collapse --> 
    </div><!-- /.container-fluid --> 
    </nav>

источник

2016-05-30 in2d

Возможный дубликат [Bootstrap 3 Navbar Collapse] (http://stackoverflow.com/questions/18192082/bootstrap-3-navbar-collapse) – vanburen

Эй я получил его на работу с добавлением .navigatsioon везде

@media (max-width: 1024px) { 
    .navigatsioon ul.nav.navbar-nav{ 
    margin-left:-15px; 
} 
    .navigatsioon .navbar-header { 
     float: none; 
    } 
    .navigatsioon .navbar-left,.navbar-right { 
     float: none !important; 
    } 
    .navigatsioon .navbar-toggle { 
     display: block; 
    } 
    .navigatsioon .navbar-collapse { 
     border-top: 1px solid transparent; 
     box-shadow: inset 0 1px 0 rgba(255,255,255,0.1); 
    } 
    .navigatsioon .navbar-fixed-top { 
     top: 0; 
     border-width: 0 0 1px; 
    } 
    .navigatsioon .navbar-collapse.collapse { 
     display: none!important; 
    } 
    .navigatsioon .navbar-nav { 
     float: none!important; 
     margin-top: 7.5px; 
    } 
    .navigatsioon .navbar-nav>li { 
     float: none; 
    } 
    .navigatsioon .navbar-nav>li>a { 
     padding-top: 10px; 
     padding-bottom: 10px; 
    } 
    .navigatsioon .collapse.in{ 
     display:block !important; 
    } 
}

источник

2016-05-31 17:12:13 in2d

Bootstrap. Как изменить коллапс Navbar останова

Перейти к Customize page/Grid system и установите в поле @grid-float-breakpoint значение, которое вам нужно.
Нажмите кнопку Compile and Download в нижней части страницы.
Извлеките файлы bootstrap.css и bootstrap.min.css из полученного архива.
Используйте их вместо стандартных файлов bootstrap.css и bootstrap.min.css на вашем сайте.

Больше ничего не нужно.

источник

2016-05-31 22:34:24

My bootstrap navbar collapse breakpoint wont change

ответ

Смежные вопросы