Navbar不会修复到顶部

时间：2016-06-16 12:43:57

标签： html css html5 twitter-bootstrap css3

页面的代码在这里

<?php
session_start();
require_once 'class.user.php';
$user_home = new USER();
$_SESSION['userSession'] = '';

/*if(!$user_home->is_logged_in())
{
    $user_home->redirect('index.php');
}*/

$stmt = $user_home->runQuery("SELECT * FROM tbl_users WHERE userID=:uid");
$stmt->execute(array(":uid"=>$_SESSION['userSession']));
$row = $stmt->fetch(PDO::FETCH_ASSOC);

?>

<!DOCTYPE html>
<html class="no-js">

    <head>
        <title><?php echo $row['userEmail']; ?></title>
        <!-- Bootstrap -->
        <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
        <link href="bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet" media="screen">
        <link href="assets/styles.css" rel="stylesheet" media="screen">
        <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
        <!--[if lt IE 9]>
            <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->

    </head>

    <body>
        <div class="navbar navbar-fixed-top">
            <div class="navbar-inner">
                <div class="container-fluid">
                    <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span>
                     <span class="icon-bar"></span>
                     <span class="icon-bar"></span>
                    </a>
                    <a class="brand" href="#">Member Home</a>
                    <div class="nav-collapse collapse">
                        <ul class="nav pull-right">
                            <li class="dropdown">
                                <a href="#" role="button" class="dropdown-toggle" data-toggle="dropdown"> <i class="icon-user"></i> 
                                <?php echo $row['userEmail']; ?> <i class="caret"></i>
                                </a>
                                <ul class="dropdown-menu">
                                    <li>
                                        <a tabindex="-1" href="logout.php">Logout</a>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                        <ul class="nav">
                            <li class="active">
                                <a href="#">NavBar Link #1</a>
                            </li>
                            <li class="dropdown">
                                <a href="#" data-toggle="dropdown" class="dropdown-toggle">Let's try some dropdown links<b class="caret"></b>

                                </a>
                                <ul class="dropdown-menu" id="menu1">
                                    <li><a href="#">Link #1</a></li>
                                    <li><a href="#">Link #2</a></li>
                                    <li><a href="#">Link #3</a></li>
                                    <li><a href="#">Link #4</a></li>
                                    <li><a href="#">Link #5</a></li>
                                </ul>
                            </li>
                            <li>
                                <a href="#">One last NavBar link</a>
                            </li>


                        </ul>
                    </div>
                    <!--/.nav-collapse -->
                </div>
            </div>
        </div>      

        <span style="display: inline-block;"><h1>Refer to the alerts below</h1></span><span style="display: inline-block;"><h5>&nbsp;&nbsp;&nbsp;&nbsp;(Issued against the items' Reference Status)</h5></span>
        <h2>Inventory Table</h2> 
        <div class="table-responsive">
            <table class="table">
                <thead>
                    <tr>
                        <th>No</th>
                        <th>PartNo</th>
                        <th>MfrPartNo</th>
                        <th>MfrNo</th>
                        <th>PartDescription</th>
                        <th>PrimePart</th>
                        <th>PMA</th>
                        <th>KeyWord</th>
                        <th>PartType</th>
                        <th>PlanningType</th>
                        <th>ReferenceStatus</th>
                    </tr>
                </thead>
                <?php
                    $dbh = new PDO("mysql:host=localhost;dbname=dbtest", 'root', 'root');
                    $dbh->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
                    $dbh->setAttribute(PDO::ATTR_EMULATE_PREPARES, false);
                    $sth = $dbh->prepare("SELECT `No`, `PartNo`, `MfrPartNo`, `MfrNo`, `PartDescription`, `PrimePart`, `PMA`, `KeyWord`, `PartType`, `PlanningType`, `ReferenceStatus` FROM part_no");
                    $sth->execute();
                ?>
                <?php foreach($sth->fetchAll() as $row) : if(($row["ReferenceStatus"]<2)&&($row["ReferenceStatus"]!="Active")){?>
                <tr>
                    <td><?php echo $row["No"]; ?></td>
                    <td><?php echo $row["PartNo"]; ?></td>
                    <td><?php echo $row["MfrPartNo"]; ?></td>
                    <td><?php echo $row["MfrNo"]; ?></td>
                    <td><?php echo $row["PartDescription"]; ?></td>
                    <td><?php echo $row["PrimePart"]; ?></td>
                    <td><?php echo $row["PMA"]; ?></td>
                    <td><?php echo $row["KeyWord"]; ?></td>
                    <td><?php echo $row["PartType"]; ?></td>
                    <td><?php echo $row["PlanningType"]; ?></td>
                    <td><?php echo $row["ReferenceStatus"]; ?></td>
                </tr>
                <?php }endforeach;?>
            </table>
        </div>


        <!--/.fluid-container-->
        <script src="bootstrap/js/jquery-1.9.1.min.js"></script>
        <script src="bootstrap/js/bootstrap.min.js"></script>
        <script src="assets/scripts.js"></script>

    </body>

</html>

自定义样式如assets / styles.css在这里

/** Home Page **/
body {
    padding-top: 60px;
    padding-bottom: 40px;
    background-color: #F5F5F5;
}

/** Login Page **/
#login {
    padding-top: 40px;
    padding-bottom: 40px;
}

footer 
{
    text-align: center;

    font-family: monospace;
}
footer a
{
    text-decoration: none;
}
footer a:hover
{
    text-decoration: underline;
}
#love_footer_image
{
    display: inline-block;
    width: 1.1em;
    height: 0.9em;
    background-image: url(https://upload.wikimedia.org/wikipedia/commons/4/42/Love_Heart_SVG.svg);
    background-size: cover;
}
#logo
{
    width: 77vmin;
    height: 23vmin;
    background-image: url(https://upload.wikimedia.org/wikipedia/hi/e/e3/Air_India_Logo.svg);
    background-size: cover;
    margin: 0 auto;
}

#login .form-signin {
    min-width: 77vmin;
    max-width: 300px;
    padding: 19px 29px 29px;
    margin: 0 auto 20px;
    overflow-y: hidden;

    background-color: #FDFCFC;
    border: 0.3em solid #C4082E;
    border-bottom: 0.3em solid #C4082E;
    border-right: 0.3em solid #C4082E;
    border-radius: 1em;

    /*background-color: #FDFCFC;
    border: 1px solid #e5e5e5;
    -webkit-border-radius: 5px;
       -moz-border-radius: 5px;
            border-radius: 5px;
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.05);
       -moz-box-shadow: 0 1px 2px rgba(0,0,0,.05);
            box-shadow: 0 1px 2px rgba(0,0,0,.05);*/
}
#login .form-signin .form-signin-heading,
#login .form-signin .checkbox {
    margin-bottom: 10px;
}
#login .form-signin input[type="text"],
#login .form-signin input[type="password"],
#login .form-signin input[type="email"] {
    font-size: 16px;
    height: auto;
    margin-bottom: 15px;
    padding: 7px 9px;
}

/** 2 level sub menu **/
.dropdown-menu-with-subs .sub-menu {
  left: 100%;
  position: absolute;
  top: 0;
  visibility: hidden;
  margin-top: -1px;
}

.dropdown-menu-with-subs li:hover .sub-menu {
  visibility: visible;
  display: block;
}

.navbar .sub-menu:before {
  border-bottom: 7px solid transparent;
  border-left: none;
  border-right: 7px solid rgba(0, 0, 0, 0.2);
  border-top: 7px solid transparent;
  left: -7px;
  top: 10px;
}
.navbar .sub-menu:after {
  border-top: 6px solid transparent;
  border-left: none;
  border-right: 6px solid #fff;
  border-bottom: 6px solid transparent;
  left: 10px;
  top: 11px;
  left: -6px;
}

/** Global **/
#content {
  margin-left:0px;
}
.hide-sidebar, .show-sidebar {
  cursor: pointer;
}
.padd-bottom {
  margin-bottom: 5px;
}
.breadcrumb {
    margin: 0 0 0px;
    padding: 10px 0px;
    background-color: transparent;
}

.block {
    border: 1px solid #ccc;
    background: white;
    margin: 1em 0em;
    border-top: none;
}

.block-content {
    margin: 1em;
    min-height: .25em;
}

.block-header {
    margin-bottom: 0px;
    border-right: none;
    border-left: none;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
}
.block-header div {
    padding-top: 10px;
}


.chart-bottom-heading {
    margin-top: 5px;
    text-align: center;
}

/** Side Bar **/
.bs-docs-sidenav {
  max-width: 228px;
  margin: 30px 0 0;
  padding: 0;
  background-color: #fff;
  -webkit-border-radius: 6px;
     -moz-border-radius: 6px;
          border-radius: 6px;
  -webkit-box-shadow: 0 1px 4px rgba(0,0,0,.065);
     -moz-box-shadow: 0 1px 4px rgba(0,0,0,.065);
          box-shadow: 0 1px 4px rgba(0,0,0,.065);
}
.bs-docs-sidenav > li > a {
  display: block;
  width: 190px \9;
  margin: 0 0 -1px;
  padding: 8px 14px;
  border: 1px solid #e5e5e5;
}
.bs-docs-sidenav > li:first-child > a {
  -webkit-border-radius: 6px 6px 0 0;
     -moz-border-radius: 6px 6px 0 0;
          border-radius: 6px 6px 0 0;
}
.bs-docs-sidenav > li:last-child > a {
  -webkit-border-radius: 0 0 6px 6px;
     -moz-border-radius: 0 0 6px 6px;
          border-radius: 0 0 6px 6px;
}
.bs-docs-sidenav > .active > a {
  position: relative;
  z-index: 2;
  padding: 9px 15px;
  border: 0;
  text-shadow: 0 1px 0 rgba(0,0,0,.15);
  -webkit-box-shadow: inset 1px 0 0 rgba(0,0,0,.1), inset -1px 0 0 rgba(0,0,0,.1);
     -moz-box-shadow: inset 1px 0 0 rgba(0,0,0,.1), inset -1px 0 0 rgba(0,0,0,.1);
          box-shadow: inset 1px 0 0 rgba(0,0,0,.1), inset -1px 0 0 rgba(0,0,0,.1);
}
/* Chevrons */
.bs-docs-sidenav .icon-chevron-right {
  float: right;
  margin-top: 2px;
  margin-right: -6px;
  opacity: .25;
}
.bs-docs-sidenav > li > a:hover {
  background-color: #f5f5f5;
}
.bs-docs-sidenav a:hover .icon-chevron-right {
  opacity: .5;
}
.bs-docs-sidenav .active .icon-chevron-right,
.bs-docs-sidenav .active a:hover .icon-chevron-right {
  opacity: 1;
}
.bs-docs-sidenav.affix {
  top: 40px;
}
.bs-docs-sidenav.affix-bottom {
  position: absolute;
  top: auto;
  bottom: 270px;
}

/* Icons
------------------------- */
.the-icons {
  margin-left: 0;
  list-style: none;
}
.the-icons li {
  float: left;
  width: 25%;
  line-height: 25px;
}
.the-icons i:hover {
  background-color: rgba(255,0,0,.25);
}

问题是当以移动分辨率查看时，导航栏不会保持固定在顶部。这是附加的屏幕截图，顶部的额外空置空间用双头箭头标记

Screenshot

有人可以帮我解决这个问题吗？

1 个答案:

答案 0 :(得分：1)

我正在自己回答这个问题，因为我正在自己处理它并找到了解决方法。

<style>
    @media only screen and (max-width: 980px)
    {
        #gap
        {
            display: none;
        }
    }
</style>

<div style="padding-top: 60px;" id="gap"></div>

将其添加到常规页面代码可使所有内容按预期工作。

相关问题
最新问题