固定在顶部导航栏覆盖网站上的引导程序

Question

Because I am using this Navbar as a site editing tool rather than a normal Navbar, I require a solution that doesn't involve editing the Bootstrap code and instead use some type of style="" edit instead as I am including the Bootstrap code from elsewhere to make things light, so I can use it on multiple sites. 因为我使用此Navbar作为网站编辑工具，而不是普通的Navbar，所以我需要一个不涉及编辑Bootstrap代码的解决方案，而是使用某种类型的style="" edit代替，因为我包括来自以下版本的Bootstrap代码在其他地方使事情变得轻松，所以我可以在多个站点上使用它。

I am trying to stop the fixed to top Navbar from overlaying the top of the website, this is showing the Logo and top links under the Navbar, instead I am looking to try to layer it on top until the user scrolls down where the Navbar will then cover the website as it should on its way down. 我试图阻止fixed to top导航栏覆盖网站的顶部，这是在导航栏下方显示徽标和顶部链接，而是试图将其分层放置在顶部，直到用户向下滚动导航栏的位置为止然后将其覆盖，以使其正常运转。 Here is the code I am using, if anybody can help me find a solution I would be appreciative! 这是我正在使用的代码，如果有人可以帮助我找到解决方案，我将不胜感激！

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left" role="search">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

I have attempted to introduce: 我试图介绍：

style="padding-top:100px;" And changed the px but with no luck, this then totally covers the top of the websites. 并更改了px但没有运气，然后完全覆盖了网站的顶部。

Answer 1

You just have to apply the padding style at the body instead the div : 您只需要在body而不是div处应用填充样式：

<body style="padding-top: 100px">

It's given in the docs: http://getbootstrap.com/components/#navbar-fixed-top :-) 它在文档中给出： http : //getbootstrap.com/components/#navbar-fixed-top :-)

Body padding required 需要身体填充

The fixed navbar will overlay your other content, unless you add padding to the top of the <body> . 除非您在<body>的顶部添加padding ，否则固定的导航栏将覆盖您的其他内容。 Try out your own values or use our snippet below. 试用您自己的值或使用下面的代码段。 Tip: By default, the navbar is 50px high. 提示：默认情况下，导航栏的高度为50px。

body { padding-top: 70px; }

Make sure to include this after the core Bootstrap CSS. 确保在核心Bootstrap CSS 之后添加此名称。

固定在顶部导航栏覆盖网站上的引导程序

问题描述

1 个解决方案

解决方案1
1 已采纳 2015-12-08 10:49:56

Body padding required 需要身体填充

固定在顶部导航栏覆盖网站上的引导程序

问题描述

1 个解决方案

解决方案1 1 已采纳 2015-12-08 10:49:56

Body padding required 需要身体填充

解决方案1
1 已采纳 2015-12-08 10:49:56