jquery - Bootstrap navbar-fixed-top 隐藏页面内容

Question

好的，首先我知道那里有一些类似的问题，我已经尝试使用它们，但似乎没有任何效果。

我已经在主要内容的容器中添加了 padding-top，但是当我放置时:

@media (max-width: 768px) {
 body{
  padding: 0;
 }
}

它会覆盖填充(甚至在计算机浏览器上)并隐藏页面的前 70 像素。

这是我当前的 HTML:

<div id="navWrap">
  <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
      <div class="container-fluid">

        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
            <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="index.php"><img src="images/header.png" alt="" width="130px" /></a>
        </div>

        <div class="navbar-collapse collapse" id="bs-example-navbar-collapse-1">

        <ul class="nav navbar-nav navbar-right">
            <form class="navbar-form" role="search" method='post' action="phplib/search.php">
                <div class="input-group">
                    <input type="text" class="form-control" placeholder="Search Job..." name="srch-term" id="srch-term" value="" />
                    <div class="input-group-btn">
                        <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
                    </div>
                </div>
            </form>
        </ul>


        <ul class="nav navbar-nav">
            <li class='GeneralInfo dropdown'>
                <a href='#' class='dropdown-toggle' data-toggle='dropdown'>general info<span class='glyphicon glyphicon-chevron-down navDown'></span></a>
                <ul class='dropdown-menu' role='menu'>
                    <li><a href='/email_list.php'>employee directory</a></li>
                    <li><a href='/docs.php'>documents</a></li>
                    <li><a href='/ftp.php'>ftp</a></li>
                    <li><a href='/manage/'>manage</a></li>
                    <li><a href='/flyspray'>bug/feature tracking</a></li>
                </ul>
            </li>
            <li class='JobInfo dropdown'>
                <a href='#' class='dropdown-toggle' data-toggle='dropdown'>job info<span class='glyphicon glyphicon-chevron-down navDown'></span></a>
                <ul class='dropdown-menu' role='menu'>
                    <li><a href='/job/list'>job list</a></li>
                    <li><a href='/files_required.php'>files rqrd</a></li>
                    <li><a href='/incoming_list.php'>incoming data list</a></li>
                    <li><a href='/signoff.php'>signoffs</a></li>
                    <li><a href='/leader_list2.php'>leader list</a></li>
                    <li><a href='/milestones'>milestone/timelines</a></li>
                </ul>
            </li>
            <li class='New dropdown'>
                <a href='#' class='dropdown-toggle' data-toggle='dropdown'>new<span class='glyphicon glyphicon-chevron-down navDown'></span></a>
                <ul class='dropdown-menu' role='menu'>
                    <li><a href='/new_job.php'>new job</a></li>
                    <li><a href='/new_incoming.php'>new incoming</a></li>
                    <li><a href='/add_quoteset.php'>new quote</a></li>
                    <li><a href='/add_program.php'>new program</a></li>
                </ul>
            </li>
        </ul>

    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>
</div>

如您所知，我添加了一些自己的类(class)。如果您有任何想要查看的 CSS，请告诉我。

理想情况下，我希望它能像这样工作:

http://jsfiddle.net/J7jJh/1/show/

当点击下拉菜单时，它会将页面内容向下推。

(我在搜索帮助时发现了那个链接，它不是我的)

编辑:这是在移动设备上查看页面的问题。在 PC 上一切正常。移动是唯一的问题，主要是横向 View

Answer 1

好吧，如果你想修复它，你可以向那个 nav 添加一个类(以防万一你在任何地方重复使用那个 nav)然后简单地定位它像这样:

.myPseudoFixedNav{top:50px; left:5%; width:90%; background:#333;}
.mainbody{padding-top:100px;}
@media (max-width: 767px) {
.myPseudoFixedNav{top:0px;}
.mainbody{padding-top:50px;}
}

参见 Bootply

添加 container 部分是为了演示目的，但重要的是你要了解你需要如何解决它与填充的关系(你也可以使用 position -> top :100px)