1920x1080屏幕導航欄問題

我有響應式導航欄問題。如果窗口大於1366px，我已經在下面的代碼中調整了它的nav寬度。1920x1080屏幕導航欄問題

$(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>

一旦窗口加載nav得到1920px第一的全寬，然後切換到nav-container風格。

當窗口加載完全時，我怎樣才能獲得nav-container CSS？

來源

2017-07-13 Sri09

我不知道爲什麼你正在使用這個JS，你可以很容易地設置在CSS媒體查詢和設置的樣式那麼你不必處理這個當前的問題 – Huangism

使用@media，這適用於你的情況：

.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>

來源

2017-07-13 17:49:44 fen1x

1920x1080屏幕導航欄問題

回答

相關問題