关于 Bootstrap 4 - 导航栏顶部放置答案

【问题标题】：About Bootstrap 4 - Navbar top placement关于 Bootstrap 4 - 导航栏顶部放置
【发布时间】：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的工作原理......
你能接受答案吗？

标签： html css twitter-bootstrap

【解决方案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

【讨论】：