调整浏览器大小后,导航栏的按钮消失

时间:2014-04-01 14:43:31

标签: javascript jquery html css twitter-bootstrap

正如标题所说,我对我创建的导航栏的按钮有一个调整大小的问题。当浏览器的窗口变小时,按钮从导航栏流出。这是代码:

<div id="bar" class="navbar navbar-default navbar-fixed-top" role="navigation">
       <div class="container">
         <div id="navbar" class="navbar-header">
           <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
             <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 class="brand" src = "img/logo.jpg"/></a>
        </div>
        <div class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <?php if ($current_page == 'index') { ?>
        <li class="active"> <?php } else { ?>
        <li class="inactive"> <?php } ?>
        <a href="Index.php"><span class="glyphicon glyphicon-home"></span> Home</a></li>

        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-th-list"></span> Products<b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li><a href="BrowseByTitle.php">Browse by Title</a></li>
            <li><a href="BrowseByArtist.php">Browse by Artist</a></li>
            <li><a href="BrowseByGenre.php">Browse by Genre</a></li>
            <li class="divider"></li>
            <li class="dropdown-header">Vote now for your favorite albums!</li>
            <li><a href="rateAlbum.php">Ratings</a></li>
          </ul>
        </li>

        <?php if ($current_page == 'about') { ?>
        <li class="active"> <?php } else { ?>
        <li class="inactive"> <?php } ?>
        <a href="AboutTheSite.php"><span class="glyphicon glyphicon-info-sign"></span> About</a></li>

        <?php if ($current_page == 'signin') { ?>
        <li class="active"> <?php } else { ?>
        <li class="inactive"> <?php } ?>

        <?php if ($current_page == 'logout') { ?>
        <li class="active"> <?php } else { ?>
        <li class="inactive"> <?php } ?>

        <?php if (isset($_SESSION['user'])) { ?>
                <a href="Logout.php"><span class="glyphicon glyphicon-off"></span> Logout</a>
         <?php } else { ?> 
        <a href="SignIn.php"><span class="glyphicon glyphicon-globe"></span> Sign In</a>
        <?php } ?>
        </li>

        <?php if ($current_page == 'contact') { ?>
        <li class="active"> <?php } else { ?>
        <li class="inactive"> <?php } ?>
        <a href="Contact.php"><span class="glyphicon glyphicon-earphone"></span> Contact</a></li>

        <?php if ($_SESSION['Admin']!='Y') { ?>
        <div id="sb" class="col-sm-3 col-md-3">
             <form action="Search.php" method="post" class="navbar-form" role="search" >
             <div class="input-group">
             <input type="text" class="form-control" placeholder="Search" name="searchcriteria">
             <div class="input-group-btn">
            <button class="btn btn-default" type="submit" name="submit" value="search"><i class="glyphicon glyphicon-search"></i></button>
             </div>
             </div>
            </form>
        </div> 
        <?php } ?>

       <?php if ($_SESSION['Admin']=='Y') { ?>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-cog"></span> Admin Panel<b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li><a href="ArtistMaintenance.php">Manage the artists list</a></li>
            <li><a href="AlbumMaintenance.php">Manage the albums list</a></li>
            <li><a href="UserMaintenance.php">Manage the users list</a></li>
          </ul>
        </li>
       <?php } ?>
      </ul>

      <ul class="nav navbar-nav navbar-right">
            <li>
                <a href="#">
                <?php echo $_SESSION['user'] ?>
                </a>
             </li>
     </ul>
    </div><!--/.nav-collapse -->
  </div>
</div>

这里是CSS:

    body{    
   background-color:#FF9;
color:black;
   }
   .brand{
width:200px;
height:33px;
text-align:center;
   }
   #bar {
height:50px;
   }
   #sb {
   width:250px;
   }

0 个答案:

没有答案