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