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

前端之家收集整理的这篇文章主要介绍了Bootstrap css在navbar navbar-fixed-top下面隐藏容器部分前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在建立一个项目与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

原文链接:https://www.f2er.com/bootstrap/234880.html

猜你在找的Bootstrap相关文章