Bootstrap導航欄固定頂部隱藏頁面內容

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>

如您所知，我已經添加了一些自己的類。 如果您想查看CSS，請告訴我。

理想情況下，我希望它像這樣工作：

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

單擊下拉菜單時，它將頁面內容下推。

（我在尋求幫助時發現了該鏈接，這不是我的）

編輯：這是查看MOBILE頁面的問題。 在PC上一切正常。 移動是唯一的問題，主要是風景

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 ）

Answer 2

好吧，我想我看到你的擔心。

當按下上較小的分辨率插入符號（菜單按鈕）的含量必須被壓下。 只有這樣，用戶才能看到菜單項。

考慮一個320像素寬的手機屏幕。 他們在選擇菜單項時並不關心您的頁面內容，因為除了菜單項外，他們看不到其他任何內容。

有用嗎？