Question

好的，首先我知道有一些类似的问题，我尝试过使用它们，但似乎没有任何工作。

我在主要内容的容器中添加了填充顶部，但是当我放入时：

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

它会覆盖填充（即使在计算机浏览器上）并隐藏页面的前70px。

这是我目前的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

好的，我想我看到了你的担忧。

当较小分辨率上按下插入符号（菜单按钮）时，内容将被按下。这只是用户可以查看菜单项。

考虑一个320px宽的手机屏幕。他们在选择菜单项时并不关心您的页面内容，因为除了菜单项之外，他们看不到任何其他内容。

有用吗？

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

2 个答案: