Gibt es eine Möglichkeit, die bootstrap Navbar auf dem Handy navbar-fixed-bottom zu halten, und navbar-static-top auf dem Desktop? Ich dachte daran, zwei Navigationsleisten zu erstellen und eine zu verstecken und die andere zu zeigen, obwohl ich mir nicht sicher bin, ob das in Ordnung ist; Ist es in Ordnung, zwei nav-Elemente mit derselben Rolle zu verwenden?Bootstrap navbar-fixed-bottom auf dem Desktop und navbar-static-top auf dem Handy?
Sie können dies auch tun, indem Sie die Klasse der Navigationsleiste mit javascript jquery entsprechend der Bildschirmbreite hinzufügen und entfernen.
if ($(window).width() > 330) {
$('.navbar').addClass('navbar-static-top');
}
else
{
$('.navbar').addClass('navbar-fixed-bottom');
}
Es funktioniert sicher
Das funktioniert nur beim Laden der Seite, bricht ab, wenn JS deaktiviert ist und könnte beim Laden der Seite ein Flimmern des Nav von seiner Startposition verursachen. Das Ziel des Bootstrap ist es, schnell zu reagieren. CSS-Medienabfragen wären besser. – dotcomly
können Sie Medienanfragen verwenden:
<nav class="navbar navbar-default navbar-static-top" role="navigation">
@media (max-width:767px) { .navbar-static-top { position: fixed; bottom: 0; left: 0; width: 100%; margin: 0; } }
Dieser Code funktioniert für mich, und sollte leicht zu verstehen sein.
var win = $(this); // browser window
var nav = $('.navbar'); // your navigation bar
function switchNavbar() {
if (win.width() < 768) { // on mobile
nav.removeClass('navbar-static-top');
nav.addClass('navbar-fixed-bottom');
} else { // on desktop
nav.removeClass('navbar-fixed-bottom');
nav.addClass('navbar-static-top');
}
}
// On first load
$(function() {
switchNavbar();
});
// When browser resized
$(window).on('resize', function(){
switchNavbar();
});
Dies ist möglich, ja, Sie müssen einige mediaqueries auf diesem verwenden, aber es ist möglich. Ihre alternative Anmerkung ist, dass Sie mehrere nav-Elemente haben können, und es wird von w3.org unterstützt, um mehrere Navigationsrollen auf derselben Seite zu haben. http://www.w3.org/WAI/GL/wiki/Using_HTML5_nav_element#Example%3aThe_.3Cnav.3E_element – Dorvalla
@Dorvalla Ah, danke. Gibt es also keine Methoden, um dies bereits in Bootstrap integriert zu erreichen? – yaharga
Ich kann das nicht bestätigen, aber das Hinzufügen/Entfernen von Klassen durch Javascript ist eine Lösung, wenn es nach der Breite des Bildschirms sucht. – Dorvalla