0

如果你看到这个 JSFiddle 演示， http: //jsfiddle.net/4K5Sk/1/你可以看到这个屏幕：

在此处输入图像描述

为什么它不以“TEST 1”行开头？

<div class="navbar navbar-fixed-top navbar-inverse" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" 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="#menu1">menu 1</a></li>
        <li><a href="#menu2">menu 2</a></li>
        <li><a href="#menu3">menu 3</a></li>
      </ul>
    </div>
  </div>
</div>

<div class="container-fluid">
    TEST 1<br />
    TEST 2<br />
    TEST 3<br />
    TEST 4<br />
    TEST 5<br />        
</div>
4

3 回答 3

0

来自 Bootstrap 3 文档（http://getbootstrap.com/components/#navbar-fixed-top）...

“需要正文填充固定的导航栏将覆盖您的其他内容，除非您在 .

body { padding-top: 70px; }
于 2013-11-12T15:15:12.473 回答
0

由于导航的位置是固定的。此元素不会影响页面的高度。这意味着它不会将容器向下推。

要解决此问题，只需在容器中添加一个 margin-top 以将其放在导航下方（50px 应该足够了，因为这是导航的高度）。

http://jsfiddle.net/4K5Sk/2/

.container-fluid{
    margin-top:50px;
}
于 2013-11-12T12:15:07.103 回答
0

我已经接受了@Skelly 的回答，因为这是官方文档，但我已经对其进行了调整，使其更具动态性，因此它会自动找到该位置。

我有确切的代码作为我的原始帖子 - excel 我在第一行添加了一个类：

<div class="mymenu navbar navbar-fixed-top navbar-inverse" role="navigation">

Javascript：

// Position the text after the menu when loading page initially
var menuheight = $(".mymenu").height();
$("body").css("padding-top",menuheight);

// Position the text after the menu when resizing the page
$(window).resize(function () {
  var menuheight = $(".mymenu").height();
  $("body").css("padding-top",menuheight);
});

在这里更新了 Fiffle，http://jsfiddle.net/4K5Sk/3/

于 2013-11-14T10:01:30.607 回答