gpt4 book ai didi

javascript - 1920x1080 屏幕上的导航栏问题

转载 作者:太空宇宙 更新时间:2023-11-04 08:27:00 24 4
gpt4 key购买 nike

我有响应式导航栏问题。如果窗口大于 1366 像素,我已在下面编写代码以调整其 nav 宽度。

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

最佳答案

使用 @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>

关于javascript - 1920x1080 屏幕上的导航栏问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45086857/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com