个人中心
gpt4 book ai didi

css - Bootstrap css 将容器的一部分隐藏在导航栏 navbar-fixed-top 下面

转载 作者：数据小太阳 更新时间：2023-10-29 09:06:26 25 4
gpt4 key购买 nike

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

最佳答案

这是通过添加一些 padding 来处理的到 <body> 的顶部.

根据 Bootstrap's documentation on .navbar-fixed-top , 尝试您自己的值或使用我们下面的代码片段。 提示:默认情况下，navbar是50px高。

  body {
    padding-top: 70px;
  }

此外，请查看 this example 的来源并打开 starter-template.css .

关于css - Bootstrap css 将容器的一部分隐藏在导航栏 navbar-fixed-top 下面，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14735274/

25 4 0
文章推荐： css - 如何在 div 中水平居中 span 元素
文章推荐： CSS容器div没有得到高度
文章推荐： css - 有没有办法将列表分成几列？
文章推荐： css - bootstrap 按钮在单击时显示蓝色轮廓