我正在尝试使用 Bootstrap ，但对导航栏有一些疑问。目前它固定在顶部，但我希望在导航和页面顶部之间有一些填充，就好像导航是 float 的一样。我还希望导航与内容宽度相同。知道这是怎么可能的吗？
谢谢!(下面的代码)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Explore Canterbury</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<!-- Static navbar -->
<nav class="navbar navbar-default">
<div class="container-fluid">
<div id="navbar">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Locations</a></li>
<li><a href="#">Photos</a></li>
<li><a href="#">Info</a></li>
</ul>
</div><!--/.nav-collapse -->
</div><!--/.container-fluid -->
</nav>
</div> <!-- /container -->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
最佳答案
如果您希望导航栏和页面的 to 之间有一些空间，您可以添加一个新类或将样式添加到现有的导航栏类。像这样:
.navbar {
margin-top:10px;
}
我们需要更多详细信息来了解您所说的使其与内容宽度相同的含义。现在，您将导航栏包裹在一个带有容器类的 div 中，这导致它不是全宽。
关于html - 制作 Bootstrap 菜单 'floating' 和固定宽度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35038737/