此hello世界不显示。在inspect元素上，它似乎位于页面顶部。如果我在导航结束括号之前添加Hello world，则它会在导航栏中显示与其他元素相对的位置。
我正在使用bootstrap.css和我自己的样式。它应该显示在谷歌驱动器中的图像显示... https://drive.google.com/file/d/0B3RZkWk-pASgelVKSl9LZkZndTQ/view?usp=sharing
Repeater答案 0 :(得分：1)
您正在使用固定位置导航，因此页面上定期定位的元素将不具有导航所在位置并将在其下方流动的上下文。如果您不需要固定标头，请从导航类中删除navbar-fixed-top，然后页面上的其他元素将按预期流动。
否则，您可以为导航指定固定高度，然后将与padding-top相同的高度添加到body或您的主要内容部分，以将这些部分的顶部推到导航高度以下
我不建议这样做，因为它不具备高性能，但解决这个问题的另一种方法是使用javascript或jquery来收听页面load和resize事件，并在这些事件上获取导航的计算高度，并将其作为填充添加到正文或内容部分。这是一个演示。
$navbar = $('.navbar');
$(window).on('load resize',function() {
$('body').css('padding-top',$navbar.outerHeight());
})<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="bootstrap.css">
</head>
<style type="text/css">
.navbar{
padding-bottom:25px;
background-color: #808080;
}
a {
color: white;
}
.menu{
margin: auto;
width: 50%;
padding: 10px;
}
body,html {
}
</style>
<!-- Main Body-->
<body>
<div class="container">
<!-- Navigation Bar starts-->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="well"> Smart Campus
</div>
</div>
<div class="menu">
<ul class="nav nav-pills">
<li role="presentation" class="active"><a href="#">Ideas</a></li>
<li role="presentation"><a href="#">Projects</a></li>
<li role="presentation"><a href="#">Communities</a></li>
<li role="presentation"><a href="#">Knowledge</a></li>
<li role="presentation"><a href="#">Showcase</a></li>
<li role="presentation"><a href="#">News&Events</a></li>
<li role="presentation"><a href="#">About</a></li>
</ul>
</div>
<div class="menu">
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-star" aria-hidden="true"></span>
</button>
<button type="button" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-star" aria-hidden="true"></span>
</button>
<button type="button" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-star" aria-hidden="true"></span>
</button>
<button type="button" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-star" aria-hidden="true"></span>
</button>
<button type="button" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-star" aria-hidden="true"></span>
</button>
<button type="button" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-star" aria-hidden="true"></span>
</button>
<button type="button" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-star" aria-hidden="true"></span>
</button>
<button type="button" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-star" aria-hidden="true"></span>
</button>
<button type="button" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-star" aria-hidden="true"></span>
</button>
<button type="button" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-star" aria-hidden="true"></span>
</button>
</div>
</div>
</nav>
<!-- Navigation Bar starts-->
<!-- But this hello world doesn't displays. On the inspect element, it appears to be on the top of the page.-->
<div>Hello World</div>
</div>
</body>
</html>
答案 1 :(得分：0)
没有正常工作的代码片段很难，复制粘贴代码会显示“Hello World”，所以我有点困惑。我将导航和内容分成两个不同的容器，可能是。
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<!-- Navigation Bar starts-->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="well">
Smart Campus
</div>
<div class="menu">
<ul class="nav nav-pills">
<li class="active" role="presentation">
<a href="#">Ideas</a>
</li>
<li role="presentation">
<a href="#">Projects</a>
</li>
<li role="presentation">
<a href="#">Communities</a>
</li>
<li role="presentation">
<a href="#">Knowledge</a>
</li>
<li role="presentation">
<a href="#">Showcase</a>
</li>
<li role="presentation">
<a href="#">News&Events</a>
</li>
<li role="presentation">
<a href="#">About</a>
</li>
</ul>
</div>
<div class="menu">
<div aria-label="..." class="btn-group" role="group">
<button class="btn btn-default btn-lg" type="button"><span aria-hidden="true" class="glyphicon glyphicon-star"></span></button> <button class="btn btn-default btn-lg" type="button"><span aria-hidden="true" class="glyphicon glyphicon-star"></span></button> <button class="btn btn-default btn-lg" type="button"><span aria-hidden="true" class="glyphicon glyphicon-star"></span></button> <button class="btn btn-default btn-lg" type="button"><span aria-hidden="true" class="glyphicon glyphicon-star"></span></button> <button class="btn btn-default btn-lg" type="button"><span aria-hidden="true" class="glyphicon glyphicon-star"></span></button> <button class="btn btn-default btn-lg" type="button"><span aria-hidden="true" class="glyphicon glyphicon-star"></span></button> <button class="btn btn-default btn-lg" type="button"><span aria-hidden="true" class="glyphicon glyphicon-star"></span></button> <button class="btn btn-default btn-lg" type="button"><span aria-hidden="true" class="glyphicon glyphicon-star"></span></button> <button class="btn btn-default btn-lg" type="button"><span aria-hidden="true" class="glyphicon glyphicon-star"></span></button> <button class="btn btn-default btn-lg" type="button"><span aria-hidden="true" class="glyphicon glyphicon-star"></span></button>
</div>
</div>
</div>
</nav>
<!-- Navigation Bar starts-->
<!-- But this hello world doesn't displays. On the inspect element, it appears to be on the top of the page.-->
<div class="container">
<div>
<h1>Hello World</h1>
</div>
</div>
</body>
</html>
基本模板来自：Bootstrap