Question

当我尝试使用固定的导航栏代码滚动时，条形图只会分解为链接的框，它会覆盖页面标题，我该如何解决这个问题？我的所有代码都在一个pastebin中，因为在这里直接发布它太长了。

Answer 1

我的方法是将衬垫推到身体上。导航块是固定的，所以它没有物理上的＆＃39;干扰任何事情，这意味着它不会将你的内容推到它下面。

我看到你正在使用jQuery，所以我们可以使用它：

<script type="text/javascript">
    $(document).ready(function() {
        var navHeight = $('#nav').height();
        $('body').css("padding-top", navHeight);
    });
</script>

每次页面加载后获取高度并将其传递到身体的填充顶部是一种自动防故障解决方案，因此如果您的菜单元素更多且菜单中有两行或更多行，则内容将紧随其后。

要使此解决方案正常工作，您需要删除放入的固定高度：

#nav, .fixed-nav-bar {
    height: auto;
}

让他们自己做魔术。

Answer 2

首先你应该修改你的代码。
你在h1标签内设置了nav和head这是错误的，它应该进入body。< br />要查看head标签内的元素，请访问此页面：http://www.w3schools.com/tags/tag_head.asp

因此，在将该代码放入body检查bootstrap文档之后，因为它已经有fixed navbar的类，并且在这里你自己编写。

然后我建议将h1标题放在导航栏下方，而不是现在的上方，以便代码匹配元素的可视放置。
而且，就像在固定顶部导航栏的bootstrap文档中所述，如果使用padding-top，则应将.navbar-fixed-top添加到您的身体。
默认情况下，导航栏高50像素，但因为您增加了它，然后向正文添加更多padding-top。

此外，您的链接如下所示：

<li><a href="What Are Drones.html">What Are Drones</a></li>

在大多数情况下，这不起作用，所以你应该从html文件名中删除空格。
例如这样：

<li><a href="what-are-drones.html">What Are Drones</a></li>

Answer 3

此代码非常适合您。
快乐编码： - ）

＆＃13;

@charset "utf-8";
/* CSS Document */
#TITLE {color: #1762a1; font-family: "Cuprum", sans-serif; font-size:80px;}

.navbar-nav li a{color: white ! important; font-family: "Cuprum", sans-serif; }
.navbar-brand{color: white ! important;}

BODY{PADDING-TOP: 50px;}

＆＃13;

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Drones</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link href='https://fonts.googleapis.com/css?family=Cuprum:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="btt index.js"></script>
<link rel="stylesheet" href="indexCSS.css" />

  <nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span> 
      </button>
      <a class="navbar-brand" href="#">Kittatinny's Drone Information</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li><a href="index.html">Home</a></li>
    <li><a href="What Are Drones.html">What Are Drones</a></li>
    <li><a href="How Drones Work.html">How Drones Work</a></li>
    <li><a href="Buying a Drone.html">Buying a Drone</a></li>
    <li><a href="About Us.html">About Us</a></li>
      </ul>
    </div>
  </div>
</nav>
  <h1 id="TITLE" class="text-center"> Kittatinny's Drone Information</h1>
</head>

＆＃13;

固定导航栏分解并涵盖内容

3 个答案: