Html 关于 Bootstrap 4 - 导航栏顶部放置
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/37946942/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
About Bootstrap 4 - Navbar top placement
提问by zwl1619
I am using Bootstrap 4.
I have a question about the Navbar "Fixed top" class. http://v4-alpha.getbootstrap.com/components/navbar/#placement
The Navbar "Fixed top" class covers content.
我正在使用 Bootstrap 4。
我有一个关于导航栏“固定顶部”类的问题。http://v4-alpha.getbootstrap.com/components/navbar/#placement
导航栏“固定顶部”类涵盖内容。
like this demo below, the Navbar covers <div class="jumbotron">,I want the Navbar to not cover it, what should I do?
像下面这个演示，导航栏覆盖了<div class="jumbotron">，我想让导航栏不覆盖它，我该怎么办？
I have no idea how to prevent the Navbar from covering content, because the device's size is visible.
我不知道如何防止导航栏覆盖内容，因为设备的大小是可见的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<link href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/tether/1.3.2/css/tether.min.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-fixed-top navbar-light bg-faded">
<a class="navbar-brand" href="#">Navbar</a>
<ul class="nav navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
</ul>
<form class="form-inline pull-xs-right">
<input class="form-control" type="text" placeholder="Search">
<button class="btn btn-success-outline" type="submit">Search</button>
</form>
</nav>
<div class="jumbotron">
<h1 class="display-3">Hello, world!</h1>
<p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
<hr class="m-y-2">
<p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
<p class="lead">
<a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
</p>
</div>
<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/tether/1.3.2/js/tether.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script>
</body>
</html>
回答by Vlad
Try using sticky-topinstead of fixed-topthis worked for me on Bootstrap 4 Alpha6.
尝试在 Bootstrap 4 Alpha6 上使用sticky-top而不是fixed-top这对我有用。
回答by BanelingRush
In my opinion the best way would be to set an enclosing tag to the rest of the content that it is covering and set the margin-topattribute in cssin vwor vhor percentages(Depending on your use case) to make sure no content is hidden by the fixed bar on the top. This will make sure it is even resizable without significant changes in the navbar's effect on the page although i would suggest changing the margin on the basis of page size using the @mediacontroller in css.
在我看来，最好的方法是为它所覆盖的其余内容设置一个封闭标签，并在css 中以vw或vh或百分比（取决于您的用例）设置margin-top属性以确保没有内容被顶部的固定条隐藏。这将确保它甚至可以调整大小而不会显着改变导航栏对页面的影响，尽管我建议使用css 中的@media控制器根据页面大小更改边距。
For more information on your problem you can check this thread: twitter bootstrap navbar fixed top overlapping site
有关您的问题的更多信息，您可以查看此线程： twitter bootstrap 导航栏固定顶部重叠站点
回答by Kld
You can fix this with css
你可以用css解决这个问题
<style>
body {
margin-top: 50px;
}
</style>
回答by Viet
Use:
用：
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
as shown hereon w3schools.com
如这里的w3schools.com
The 4.0.0 version of bootstrap css doesn't work properly. I had the same problem and replacing with 3.3.7 version fixed it.
4.0.0 版本的 bootstrap css 无法正常工作。我遇到了同样的问题，替换为 3.3.7 版本修复了它。
回答by Ali Metwally
You can Use class .sticky-top or overcome this using custom CSS
您可以使用 class .sticky-top 或使用自定义 CSS 克服这个问题
body{
padding-top: 70px;
z-index: 0;
}
