131

我正在使用 Bootstrap 构建一个项目，但我面临的问题很小。我在 Nav-top 下方有一个容器。我的问题是我的容器的某些部分隐藏在 nav-top 标题下方。我不想使用顶部边距容器。请参阅下面的 html，其中我面临这个问题

<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<link rel="stylesheet" href="~/stylesheets/bootstrap.css"/>
<link rel="stylesheet" href="~/stylesheets/bootstrap-responsive.css"/>

</head>
<body>
    <div class="navbar navbar-fixed-top ">
        <div class="navbar-inner">
            <div class="container">
           <button data-target=".nav-collapse" data-toggle="collapse" class="btn btn-navbar collapsed" type="button">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
                <div class="nav-collapse"><ul class="nav" id="navbar"><li ng-class="{active:section=='plunks'}" class="active"><a href="/plunks/trending"><i class="icon-home"></i>Home</a></li><li><a target="_self" href="/edit/"><i class="icon-calendar"></i>General Election 2014</a></li><li class="divider-vertical">
                    </li><li class="dropdown"><a class="dropdown-toggle" href="#" data-toggle="dropdown">
                        <i class="icon-eye-open">
                        </i>Assembly Elections
                        <b class="caret"></b>
                        </a>
                        <ul class="dropdown-menu">
                                <li><a href="#/HTML5Apps">Assembly Elections 2013</a></li>
                        </ul>
                         </li><li class="divider-vertical">
                    </li><li ng-class="{active:section=='tags'}"><a href="/tags"><i class="icon-th"></i>Constituecy</a></li><li ng-class="{active:section=='discuss'}"><a href="/discuss"><i class="icon-time"></i>Election News</a></li><li class="divider-vertical"></li><li><a href="https://github.com/filearts/plunker"><i class="icon-bell"></i>Candidate</a></li></ul></div>
             </div>
         </div>
    </div>
  <div  class="container" >
   <ul class="nav nav-pills">
    <li class="active">
    <a href="#">Popular</a>
    </li>
    <li><a href="#">Trending</a></li>
    <li><a href="#">Latest</a></li>
    </ul>
   </div>

    <script src="~/Scripts/jquery.js"></script>
    <script src="~/Scripts/bootstrap-dropdown.js"></script>
    <script src="~/Scripts/Collapse.js"></script>
</body>
</html>
4

8 回答 8

227

这是通过padding在<body>.

根据Bootstrap 上的文档.navbar-fixed-top，尝试您自己的值或使用下面的代码段。提示：默认情况下，navbar为50px高。

  body {
    padding-top: 70px;
  }

此外，请查看此示例的源代码并打开starter-template.css.

于 2013-02-06T17:42:21.517 回答
41

我猜您遇到的问题与顶部固定导航栏的动态高度有关。例如，当用户登录时，您需要显示某种“ Hello [User Name] ”，而当名称太宽时，导航栏需要使用更高的高度，以便此文本不会与导航栏菜单重叠。由于导航栏的样式为“位置：固定”，因此主体保持在其下方并且其较高的部分被隐藏，因此您需要在每次导航栏高度发生变化时“动态”更改顶部的填充，这将发生在以下情况案例场景：

  1. 页面已加载/重新加载。
  2. 调整浏览器窗口的大小，因为这可能会遇到不同的响应断点。
  3. 导航栏内容被直接或间接修改，因为这可能会引起高度变化。

这种动态性并没有被常规CSS覆盖，所以如果用户启用了JavaScript，我只能想出一种方法来解决这个问题。请尝试以下jQuery代码片段来解决案例场景 1 和 2；对于案例场景 3，请记住在导航栏内容发生任何更改后调用函数onResize() ：

var onResize = function() {
  // apply dynamic padding at the top of the body according to the fixed navbar height
  $("body").css("padding-top", $(".navbar-fixed-top").height());
};

// attach the function to the window resize event
$(window).resize(onResize);

// call it also when the page is ready after load or reload
$(function() {
  onResize();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

于 2015-05-21T01:34:04.893 回答
20

只需在固定导航栏之前定义一个空导航栏，它将创建所需的空间。

<nav class="navbar navbar-default ">
</nav>
<nav class="navbar  navbar-default navbar-fixed-top ">
     <div class="container-fluid">
// Your menu code 
     </div>
</nav>
于 2015-08-05T15:14:46.623 回答
9

发生这种情况是因为有了navbar-fixed-top类，导航栏获得了position:fixed. 这反过来将导航栏从文档流中取出，让正文占据导航栏后面的空间。

你需要申请padding-top或margin-top向你的container，根据你的要求用价值观>= 50px。（或玩弄不同的值）

基本引导导航栏的高度约为40px. 因此，如果您给出一个padding-top或margin-top一个50px 或更多，您将始终在容器和导航栏之间拥有呼吸空间。

于 2013-02-06T17:43:53.570 回答
6

我也遇到过这个问题，但没有脚本并且只使用 CSS 解决了它。我首先按照 Bootstrap 网站上描述的 60px 设置为固定菜单推荐 padding-top。然后我添加了三个媒体标签，它们在我的菜单也调整大小的截止点处调整填充大小。

<style>      
    body{
        padding-top:60px;
    }
    /* fix padding under menu after resize */
    @media screen and (max-width: 767px) {
        body { padding-top: 60px; }
    }
    @media screen and (min-width:768px) and (max-width: 991px) {
        body { padding-top: 110px; }
    }
    @media screen and (min-width: 992px) {
        body { padding-top: 60px; }
    }
</style>

请注意，当我的菜单宽度在 768 和 991 之间时，我的布局中的菜单徽标加上<li>选项会导致菜单换行为两行。因此，我不得不调整 padding-top 以防止菜单覆盖内容，因此为 110px。

希望这可以帮助...

于 2015-11-01T15:05:31.040 回答
6

我知道这个线程很旧，但我刚刚遇到了这个问题，我通过page-header在导航下使用我的页面中的类来修复它。我也使用了<nav>标签而不是，<div>但我不确定它会呈现任何不同的行为。

将page-header用作页面的容器，您不需要弄乱<body>，除非您不同意 为您提供的默认空间page-header。

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



   <div class="container-fluid">
        <nav class="navbar navbar-default navbar-fixed-top">
    
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                    <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="#">Bootstrap</a>
            </div>
            <div id="navbar" class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">Home</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 class="dropdown-header">Nav header</li>
                                <li><a href="#">Separated link</a></li>
                                <li><a href="#">One more separated link</a></li>
                            </ul>
                        </li>
                </ul>
                <div class="navbar-right">
                </div>
            </div>
        </nav>
    </div>
    <div class="page-header">
        <div class="clearfix">
            <div class="col-md-12">
                <div class="col-md-8 col-sm-6 col-xs-12">
                    <h1>Registration form <br /><small>A Bootstrap template showing a registration form with standard fields</small></h1>
                </div>
            </div>
        </div>
    </div>
        <div class="container">
        <div class="row">
            <form role="form">
                <div class="col-lg-6">
                    <div class="well well-sm"><strong><span class="glyphicon glyphicon-asterisk"></span>Required Field</strong></div>
                    <div class="form-group">
                        <label for="InputName">Enter Name</label>
                        <div class="input-group">
                            <input type="text" class="form-control" name="InputName" id="InputName" placeholder="Enter Name" required>
                            <span class="input-group-addon"><span class="glyphicon glyphicon-asterisk"></span></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="InputEmail">Enter Email</label>
                        <div class="input-group">
                            <input type="email" class="form-control" id="InputEmailFirst" name="InputEmail" placeholder="Enter Email" required>
                            <span class="input-group-addon"><span class="glyphicon glyphicon-asterisk"></span></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="InputEmail">Confirm Email</label>
                        <div class="input-group">
                            <input type="email" class="form-control" id="InputEmailSecond" name="InputEmail" placeholder="Confirm Email" required>
                            <span class="input-group-addon"><span class="glyphicon glyphicon-asterisk"></span></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="InputMessage">Enter Message</label>
                        <div class="input-group">
                            <textarea name="InputMessage" id="InputMessage" class="form-control" rows="5" required></textarea>
                            <span class="input-group-addon"><span class="glyphicon glyphicon-asterisk"></span></span>
                        </div>
                    </div>
                    <input type="submit" name="submit" id="submit" value="Submit" class="btn btn-info pull-right">
                </div>
            </form>
    </div>

于 2016-02-27T03:12:03.437 回答
5

如果您使用的是 Bootstrap 5 并希望导航栏位于顶部，请替换fixed-top为sticky-top.

解决了导航栏下隐藏数据的问题。

于 2021-03-24T09:40:33.620 回答
4

我用jquery解决了它

<script type="text/javascript">
$(document).ready(function(e) {
   var h = $('nav').height() + 20;
   $('body').animate({ paddingTop: h });
});
</script>

于 2016-07-15T12:54:32.350 回答