Bootstrap css在navbar navbar-fixed-top下面隐藏容器部分

发布时间：2020-12-17 23:41:51 所属栏目：安全来源：网络整理

导读：我正在建立一个项目与Bootstrap和im面对小问题。我有一个容器下面的Navtoptop.My问题是我的容器的一些部分隐藏在nav-top标题下。我不想使用顶部边距容器。 pls见下面的html，其中im面对的问题 htmlheadmeta name="viewport" content="width=device-width" /t

我正在建立一个项目与Bootstrap和im面对小问题。我有一个容器下面的Navtoptop.My问题是我的容器的一些部分隐藏在nav-top标题下。我不想使用顶部边距容器。 pls见下面的html，其中im面对的问题

<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>

解决方法

这是通过向< body>的顶部添加一些填充来处理的。

根据Bootstrap’s documentation on .navbar-fixed-top，尝试自己的值或使用我们的代码段下面。提示：默认情况下，导航栏高度为50像素。

body {
    padding-top: 70px;
  }

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!