关于 Bootstrap 4 - 导航栏顶部放置
Posted
技术标签:
【中文标题】关于 Bootstrap 4 - 导航栏顶部放置【英文标题】：About Bootstrap 4 - Navbar top placement 【发布时间】：2016-10-23 03:36:52 【问题描述】：我正在使用 Bootstrap 4。 我对导航栏“固定顶部”类有疑问。 http://v4-alpha.getbootstrap.com/components/navbar/#placement 导航栏“固定顶部”类涵盖内容。
像下面这个演示，导航栏覆盖<div class="jumbotron">，我希望导航栏不覆盖它，我该怎么办？
我不知道如何防止导航栏覆盖内容，因为设备的大小是可见的。
<!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>
【问题讨论】：
请澄清您的具体问题或添加其他详细信息以准确突出您的需求。正如目前所写的那样，很难准确地说出你在问什么。 你可以让你的内容在固定的导航栏下开始。 这就是fixed的工作原理...... 你能接受答案吗？ 【参考方案1】：您可以使用 class .sticky-top 或使用自定义 CSS 克服此问题
body
padding-top: 70px;
z-index: 0;
【讨论】：
如果你把顶部垫在上面，滚动不是也被弄糊涂了吗？【参考方案2】：用途：
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
如 w3schools.com 上的 here 所示
4.0.0 版本的 bootstrap css 不能正常工作。我也遇到了同样的问题，换成 3.3.7 版本就解决了。
【讨论】：
警告：从 4 到 3 很多事情可能会中断【参考方案3】：尝试使用 sticky-top 而不是 fixed-top 这在 Bootstrap 4 Alpha6 上对我有用。
【讨论】：
为我工作。谢谢【参考方案4】：你可以用 css 解决这个问题
<style>
body
margin-top: 50px;
</style>
【讨论】：
【参考方案5】：在我看来，最好的方法是为它所覆盖的其余内容设置一个封闭标签，并在 css 中设置 margin-top 属性vw 或 vh 或 percentages（取决于您的用例）以确保顶部的固定栏没有隐藏任何内容。这将确保它甚至可以调整大小，而不会显着改变导航栏对页面的影响，尽管我建议使用 css 中的 @media 控制器根据页面大小更改边距强>.
有关您的问题的更多信息，您可以查看此线程： twitter bootstrap navbar fixed top overlapping site
【讨论】：
以上是关于关于 Bootstrap 4 - 导航栏顶部放置的主要内容，如果未能解决你的问题，请参考以下文章
导航栏顶部的 Twitter-Bootstrap-2 徽标图像