为啥我的标题被导航栏覆盖？引导带
Posted
技术标签:
【中文标题】为啥我的标题被导航栏覆盖？引导带【英文标题】：Why is my Header Getting Covered by Nav Bar? BootStrap为什么我的标题被导航栏覆盖？引导带 【发布时间】：2014-05-21 20:18:27 【问题描述】：我正在计划使用 boostrap 并想知道为什么当我使用内置类时，我的标题仍然被切断。我可以使用 css 来移动它，但我认为在使用引导头类时我不需要添加自己的 css。
这是生成的页面，我使用的是 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>
【问题讨论】：
【参考方案1】：使用固定顶部导航栏时，您必须添加手动填充。
根据引导文档，
需要身体填充
固定的导航栏将覆盖您的其他内容，除非您在正文标签的顶部添加填充。试试你自己的价值观或使用我们下面的 sn-p。提示：默认情况下，导航栏的高度为 50px。
body padding-top: 70px;确保将这个放在核心 Bootstrap CSS 之后。
来源：http://getbootstrap.com/components/#navbar-fixed-top
【讨论】：
嗯，我不记得添加了它，所以 VS 2013 可能会感到震惊，但如果它这样做了它不会考虑到这一点，除非我在没有意识到的情况下删除它。【参考方案2】：我相信这是因为导航栏具有 navbar-fixed-top 类，这使得导航栏在 CSS 中具有固定位置，因此只需删除该类，它就不会隐藏您的标题
希望能为您解决问题。
【讨论】：
嗯，是的，这似乎是问题所在，我猜“页眉”无法弥补。虽然我的标题空白仍然比我正在尝试构建的示例更多（startbootstrap.com/templates/2-col-portfolio.html）。不知道这是因为我的不同主题还是他们有修复它的样式。 导航栏默认为 50px 高，page-header 类在顶部只有 40px 的边距，因此不足以显示。所以你可以在引导 CSS .page-header margin-top: 60px; 之后添加这个 CSS 规则
谢谢，这也是我的问题【参考方案3】：
你有双容器，删除它会看起来像这样
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">Portfolio</h1>
</div>
</div>
不是：
<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
希望对你有帮助！
【讨论】：
嗯，我只是按照这个模板：github.com/IronSummitMedia/startbootstrap/blob/master/templates/… 并使用bootswatch.com/cerulean。即使您进行了更改，它仍然会被切断。 刚刚检查了我的模板，您缺少课程，将更新 我确实有，不过这些标签之间有一些空格。 不要重复容器，必须工作，再次更新 我个人只使用容器类来包装我的所有身体一次，如果您需要更多信息，请检查哪些容器、行和列类添加到您的 css 我不知道为什么。我只是避免它，因为我有时会遇到这样的错误【参考方案4】：最懒惰的方法是添加一堆 <br> 直到标题不被阻止。或者，您可以在容器顶部添加填充。通常你的导航栏大约是 50px 高。您可以选择要提供多少填充。
【讨论】：
以上是关于为啥我的标题被导航栏覆盖？引导带的主要内容，如果未能解决你的问题，请参考以下文章