Navigationsleiste Probleme auf 1920x1080 Bildschirm

Ich habe ansprechende Navigationsleiste Probleme. Ich habe diesen unteren Code gemacht, um seine nav Breite anzupassen, wenn das Fenster größer als 1366px ist.Navigationsleiste Probleme auf 1920x1080 Bildschirm

$(document).ready(function() { 
 

 
    if (jQuery(window).width() > 1366) { 
 

 
    $('nav').addClass(function(index, currentClass) { 
 
     var addedClass; 
 
     if (currentClass === "navbar navbar-inverse navbar-fixed-top") { 
 
     addedClass = "nav-container"; 
 
     } 
 
     return addedClass; 
 
    }); 
 
    } 
 
});

.nav-container { 
 
    position: fixed; 
 
    left: 260px; 
 
    width: 1366px; 
 
    text-align: center; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 

 
<div> 
 
    <nav class="navbar navbar-inverse navbar-fixed-top"> 
 
    <div class="container"> 
 
    </div> 
 
    </nav> 
 
</div>

Sobald lädt das Fenster die nav volle Breite von 1920px zuerst bekommt und schaltet dann auf nav-container Stil.

Wie kann ich nur das nav-container CSS bekommen, wie das Fenster voll lädt?

Quelle

2017-07-13 Sri09

Ich bin nicht sicher, warum Sie js dafür verwenden, können Sie leicht eine Medienabfrage in CSS einstellen könnte und stellen die Stile Dort müssen Sie sich also nicht mit diesem aktuellen Problem befassen – Huangism

Verwendung @media funktioniert dies für Ihren Fall:

.nav-container { 
 
    position: fixed; 
 
    width: 100%; 
 

 
} 
 
@media(min-width: 1367px) { 
 
    .nav-container { 
 
     width: 1366px; 
 
     margin-left:auto; 
 
     margin-right:auto; 
 
    } 
 
}

<head> 
 
    <meta http-equiv="content-type" content="text/html"; charset="UTF-8"> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
</head> 
 

 
<body > 
 

 
<div class="container"> 
 
    <nav class="navbar navbar-inverse navbar-fixed-top nav-container"></nav> 
 
</div> 
 
</body> 
 
</html>

Quelle

2017-07-13 17:49:44 fen1x

Navigationsleiste Probleme auf 1920x1080 Bildschirm

Antwort

Verwandte Themen