Question

为什么相同的代码在bootstrap示例中有一个很好的上边距，但如果我把它放在jsfiddle中，则内容在导航下

http://getbootstrap.com/examples/starter-template/

我正在使用theese图书馆

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

码

    <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
        <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="#">Project name</a>
    </div>
    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </div><!--/.nav-collapse -->
  </div>
</div>

<div class="container">

  <div class="starter-template">
    <h1>Bootstrap starter template</h1>
    <p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
  </div>

</div>

Answer 1

该模板在padding上包含body，以避免与固定导航栏重叠。

body {
  padding-top: 50px;
}

如文档中所述：

需要身体填充固定导航栏将覆盖您的其他内容，除非您在身体顶部添加填充。尝试自己的价值观或使用下面的代码段。提示：默认情况下，导航栏高50像素。

http://getbootstrap.com/components/#navbar-fixed-top

Answer 2

添加到小提琴上的css框

.starter-template {
padding: 40px 15px;
text-align: center;
}

引导程序模板使用自己的自定义css文件，而你的小提琴没有这个文件。

Answer 3

那是因为你使用固定的yop导航。如引导文档中所述，您必须向页面的padding提供body。 e.g。

body{
padding-top: 20px;
}

来自http://getbootstrap.com/components/#navbar-fixed-top

＆＃34;固定到顶部

添加.navbar-fixed-top并记住通过向<body>添加至少40px填充来考虑其下方的隐藏区域。一定要在核心Bootstrap CSS之后和可选的响应式CSS之前添加它。＆＃34;

导航下/后导航内容

3 个答案: