Bootstrap navbar - удаление фиксированного заголовка с мобильных устройств

Question

Как изменить заголовок, который не фиксируется для мобильных устройств, но фиксирован для размеров экрана md и lg?

Например, вы можете изменить класс nav;

Мобильный: <nav class="navbar navbar-default" role="navigation">

рабочего стола: <nav class="navbar navbar-default navbar-fixed-top" role="navigation">

??

<nav class="navbar navbar-default navbar-fixed-top" role="navigation"> 
    <div class="container"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-brand-centered"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
     <div class="navbar-brand navbar-brand-centered">Brand</div> 
    </div> 
    <div class="collapse navbar-collapse" id="navbar-brand-centered"> 
     <ul class="nav navbar-nav"> 
     <li><a href="#">Link</a></li> 
     <li><a href="#">Link</a></li> 
     <li><a href="#">Link</a></li> 
     </ul> 
     <ul class="nav navbar-nav navbar-right"> 
     <li><a href="#">Link</a></li> 
     <li><a href="#">Link</a></li> 
     <li><a href="#">Link</a></li>   
     </ul> 
    </div><!-- /.navbar-collapse --> 
    </div><!-- /.container-fluid --> 
</nav> 

Answer 1

Вы хотите изолировать от мобильных устройств или уменьшить размеры экрана? Есть разница. Если вы хотите, последний:

HTML:

<nav class="navbar navbar-default navbar-static-top" role="navigation"> 

CSS:

@media (min-width:992px) { 

    body {padding-top:HEIGHTOFNAVBAR} 
    .navbar-static-top {position:fixed;top:0;right:0;left:0;} 

} 

Если вы хотите на самом деле избежать фиксированной навигации на мобильных устройствах, вы можете вынюхивать или нет устройство коснулось или не с javascript.

/* --------------- SUPPORTS TOUCH OR NOT for IOS, Android, and Windows Mobile --------------- */ 
/*! Detects touch support and adds appropriate classes to html and returns a JS object | Copyright (c) 2013 Izilla Partners Pty Ltd | http://www.izilla.com.au/Licensed under the MIT license | https://coderwall.com/p/egbgdw */ 
var supports = (function() { 
    var d = document.documentElement, 
     c = "ontouchstart" in window || navigator.msMaxTouchPoints; 
    if (c) { 
     d.className += " touch"; 
     return { 
      touch: true 
     } 
    } else { 
     d.className += " no-touch"; 
     return { 
      touch: false 
     } 
    } 
})(); 

Затем вы можете использовать HTML (то же самое):

<nav class="navbar navbar-default navbar-static-top" role="navigation"> 

CSS

.no-touch body {padding-top:HEIGHTOFNAVBAR} 
    .no-touch .navbar-static-top {position:fixed;top:0;right:0;left:0;} 

Answer 2

Чтобы установить ни один фиксированный заголовок для мобильных телефонов является не трудно его просто прозе CSS:

CSS

.headerclass { position:static;} //over rides the position fixed

Теперь изменения классов немного сложнее, но то, что вы можете сделать, это зацепиться изменения медиа-запросов. Это нужно сделать с помощью JQuery (поставляется с бутстрапом).

Необходимо выполнить поиск изменений css. Если мы установили какое-то значение в медиа-запросе, мы можем переключать классы.

CSS

@media only screen 
and (min-device-width : 1224px) { 
    width:300px; 
} 

JavaScript Jquery

var navbar = $('navbar'); 
if (navbar.css('width') == '300px') { 
    navbar.addClass('navbar-default navbar-fixed-top'); 
} 

I use these measurements : [Link][1]