Question

我有响应式导航栏问题。如果窗口大于1366px，我在下面的代码中调整了它的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？

Answer 1

使用<?xml version="1.0" encoding="UTF-8" ?>  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  <html xmlns="http://www.w3.org/1999/xhtml"> <head>  <meta http-equiv="Content-Type" content="application/vnd.hbbtv.xml+xhtml; utf-8" />  <link rel="stylesheet" href="DemoHbbtvHue.css"/> <title>Demo for HbbTV and Hue</title> </head> <body> <div id="inputpanel"> Step1: Enter IP or use DummySystem. <button type="button" id="dummy" onclick="enteringDummySystem()">DummySystem</button><br /> <br /> NOTE: Please press the button on your Hue-Bridge before clicking on "Search"<br /> IP: <input type="text" id="inIP" /> <button type="button" id="buIP" onclick="searchDevices('Lamp', 'Hue', document.getElementById('inIP').value)">Search</button><br /> <button type="button" id="getIds" onclick="getId()">Get Light IDs</button> <button type="button" id="createBut" onclick="createButton(function(){ alert('it works');})">create Button</button> </div> <div id="selectpanel"> gfsd </div> <div id="colorpanel"> <button type="button" class="colorbuttons" id="buttonSetColorWhite" onclick="setColor(0.1684,0.0416)">Blue</button><br /> <button type="button" class="colorbuttons" id="buttonSetColorRed" onclick="setColor(0.6549,0.3126)">Red</button><br /> <button type="button" class="colorbuttons" id="buttonSetColorWhite" onclick="setColor()">White</button><br /> <button type="button" class="colorbuttons" id="buttonSetColorRed" onclick="setColor()">Green</button><br /> <button type="button" class="colorbuttons" id="buttonSetColorWhite" onclick="setColor()">Yellow</button><br /> <button type="button" class="colorbuttons" id="buttonSetColorRed" onclick="setColor()">Pink</button><br /> </div> <div class="b_footer"> This demo provides the possibility to control Philips Hue lamps via a HbbTV-Application. </div> </body> </html>，这适用于您的情况：

@media

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

导航栏在1920x1080屏幕上出现问题

1 个答案: