引导CSS隐藏导航栏navbar-fixed-top下方的容器的一部分

b5buobof 于 2023-04-01 发布在其他

关注(0)|答案(9)|浏览(222)

我正在使用Bootstrap构建一个项目，我遇到了一个小问题。我在Nav-top下面有一个容器。我的问题是我的容器的某些部分隐藏在nav-top标题下面。我不想在容器中使用top-margin。请参阅下面的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>

css

来源：https://stackoverflow.com/questions/14735274/bootstrap-css-hides-a-portion-of-a-container-below-navbar-navbar-fixed-top

9条答案

按热度按时间

0qx6xfy61#

这是通过在<body>的顶部添加一些padding来处理的。
根据Bootstrap在.navbar-fixed-top上的文档，* 尝试您自己的值或使用下面的代码片段。* 提示：默认情况下，navbar为50px高。

body {
    padding-top: 70px;
  }

另外，查看this example的源代码并打开starter-template.css。

赞(0）回复(0）举报 2023-04-01

o7jaxewo2#

我猜你遇到的问题可能和顶部固定的导航栏的动态高度有关，比如用户登录时需要显示某种“* 你好[用户名]”，当名称太宽时，导航栏需要使用更高的高度，这样这个文本就不会和导航栏菜单重叠。由于导航栏的样式为“ 位置：fixed*"，主体会保持在它的下面，并且它的较高部分会隐藏起来，因此每次navbar高度发生变化时，您都需要“动态”更改顶部的填充，这将发生在以下案例场景中：
1.页面已加载/重新加载。
1.调整浏览器窗口的大小，因为这可能会遇到不同的响应断点。
1.直接或间接修改导航栏内容，因为这可能会引起高度变化。
这种动态性并不被常规的 CSS 所覆盖，所以我只能想到一种方法来解决这个问题，如果用户启用了 JavaScript。请尝试以下 jQuery 代码片段来解决案例1和2;对于case scenario 3，请记住在navbar内容发生任何变化后调用函数 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>

赞(0）回复(0）举报 2023-04-01

kognpnkq3#

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

<nav class="navbar navbar-default ">
</nav>
<nav class="navbar  navbar-default navbar-fixed-top ">
     <div class="container-fluid">
// Your menu code 
     </div>
</nav>

赞(0）回复(0）举报 2023-04-01

idv4meu84#

这是因为navbar-fixed-top类的导航栏得到了position:fixed，这反过来又将导航栏从文档流中取出，留下主体来占用导航栏后面的空间。
您需要将padding-top或margin-top应用到您的container，这取决于您对值>= 50px的需求。（或者使用不同的值）
基本的引导导航栏的高度大约为**40px。因此，如果您给予的padding-top或margin-top为50px*或更高，则 * 容器和导航栏之间始终会有呼吸空间。

赞(0）回复(0）举报 2023-04-01

yeotifhr5#

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

<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>选项会导致菜单换行。因此，我不得不调整顶部填充以防止菜单覆盖内容，因此为110 px。
希望这能帮上忙...

赞(0）回复(0）举报 2023-04-01

camsedfj6#

我知道这个线程是旧的，但我刚刚进入了这个问题，我只是在我的页面中使用了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>

赞(0）回复(0）举报 2023-04-01

8xiog9wr7#

如果您使用的是Bootstrap 5，并且希望导航栏位于顶部，则将fixed-top替换为sticky-top。
解决了导航栏下隐藏数据的问题。

赞(0）回复(0）举报 2023-04-01

rwqw0loc8#

我用jquery解决了

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

赞(0）回复(0）举报 2023-04-01

ldioqlga9#

简单：
代码（JS）

document.addEventListener("DOMContentLoaded", function(){
          navbar_height = document.querySelector('.navbar').offsetHeight; //get the offset height
          document.body.style.paddingTop = navbar_height + 'px'; // Add the offset height to the top padding
   });

StackOverflow抛出错误，因为类navbar不存在。

赞(0）回复(0）举报 2023-04-01

我来回答

引导CSS隐藏导航栏navbar-fixed-top下方的容器的一部分

9条答案

相关问题

热门标签

最新问答