twitter-bootstrap 为什么我的标题被导航栏覆盖？引导程序
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22948843/
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
Why is my Header Getting Covered by Nav Bar? BootStrap
提问by chobo2
I am planning around with boostrap and wondering why when I use the built in classes that my header is still getting cut off. I can use css to move it but I would figure I would not need to add my own css when using the bootstrap header classes.
我正在计划使用 boostrap 并想知道为什么当我使用内置类时我的标题仍然被切断。我可以使用 css 来移动它，但我认为在使用引导程序头类时我不需要添加我自己的 css。
This is the generated page, I am using Asp.net MVC 5.1 from VS 2013. So alot of it is in the master page.
这是生成的页面，我使用的是来自 VS 2013 的 Asp.net MVC 5.1。所以很多页面都在母版页中。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portfolio - My ASP.NET Application</title>
<link href="/Content/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="/Scripts/modernizr-2.6.2.js"></script>
</head>
<body>
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">Application name</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li>
<a href="/home/index">Home</a>
</li>
<li>
<a href="#">Resume</a>
</li>
<li>
<a href="/home/portfolio">Portfolio</a>
</li>
<li>
<a href="#">Contact</a>
</li>
</ul>
</div>
</div>
</div>
<div class="container body-content">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">Portfolio</h1>
</div>
</div>
</div>
<div class="navbar navbar-default navbar-fixed-bottom">
<div class="container">
<p class="navbar-text">© 2014 - My ASP.NET Application</p>
</div>
</div>
</div>
<script src="/Scripts/jquery-2.1.0.min.js"></script>
<script src="/Scripts/bootstrap.min.js"></script>
<!-- Visual Studio Browser Link -->
<script type="application/json" id="__browserLink_initializationData">
{"appName":"Firefox","requestId":"c8d12fe59c90426f9175a363b9a06484"}
</script>
<script type="text/javascript" src="http://localhost:58343/af7b5f6142444a738445c2a2e5c5a6d7/browserLink" async="async"></script>
<!-- End Browser Link -->
</body>
</html>
采纳答案by Amir5000
I believe it's because the Nav bar has the class navbar-fixed-topwhich makes the Navbar have a Fixed position in the CSS so just delete that class and it won't hide your header
我相信这是因为导航栏具有使导航栏navbar-fixed-top在 CSS 中具有固定位置的类，因此只需删除该类，它就不会隐藏您的标题
Hope that fixes it for you.
希望能帮您解决。
回答by Nathan A
When using a fixed-top navbar, you have to add manual padding.
使用固定顶部导航栏时，您必须添加手动填充。
According to bootstrap documentation,
根据引导程序文档，
Body padding required
The fixed navbar will overlay your other content, unless you add padding to the top of the body tag. Try out your own values or use our snippet below. Tip: By default, the navbar is 50px high.
body { padding-top: 70px; }Make sure to include this afterthe core Bootstrap CSS.
需要身体填充
固定导航栏将覆盖您的其他内容，除非您在 body 标签的顶部添加填充。尝试您自己的价值观或使用我们下面的代码片段。提示：默认情况下，导航栏高 50 像素。
body { padding-top: 70px; }确保在核心 Bootstrap CSS之后包含它。
Source: http://getbootstrap.com/components/#navbar-fixed-top
回答by bto.rdz
you have double container, remove that it will just look like this
你有双容器，删除它看起来像这样
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">Portfolio</h1>
</div>
</div>
not:
不是：
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">Portfolio</h1>
</div>
</div>
</div>
Differences between container, row and span in Bootstrap
Hope it helps!
希望能帮助到你！
回答by iiRosie1
The laziest way is to add a bunch of <br>'s until the header isn't blocked. Or you could add padding to the top of the container. Normally your navigation bar is about 50px tall. You choose how much padding you want to give.
最懒惰的方法是添加一堆<br>'s 直到标题不被阻塞。或者您可以在容器顶部添加填充。通常你的导航栏大约 50px 高。您选择要提供多少填充。
