我正在使用的当前版本的 Bootstrap 中的 Modal(如果我没记错的话,是 v2.3.2)很快出现,有点——也许是我,慢慢消失了。起初它工作正常,但在 jumbotron div 中插入搜索栏和表单后,它就爆炸了。我尝试恢复我的代码,但问题仍然存在。清空缓存和所有内容,仍然如此。建议?
HTML:
<!DOCTYPE html>
<html lang="eg">
<head>
<title>Vanilla</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="bootstrap/css/bootstrap.css" rel="stylesheet" media="screen">
<link href="bootstrap/css/bootstrap-responsive.css" rel="stylesheet" media="screen">
<link href="stylesheet.css" rel="stylesheet" type="text/css" media="screen">
</head>
<body style="padding: 40px">
<script src="bootstrap/js/jquery.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<!--Navigation Bar-->
<div class="navbar navbar-inverse navbar-fixed-top pull-right">
<div class="navbar-inner">
<a class="brand pull-right" href="index.php">Vanilla</a>
<ul class="nav pull-right">
<li><a class="pull-right" href="#signUpModal" data-toggle="modal">Need an account? Sign Up here</a></li>
<li><form class="navbar-form pull-right" action="login.php" method="POST">
<input type="text" class="span2" name="uname" placeholder="Username">
<input id="password-password" type="password" class="span2" name="upass" placeholder="Password">
<button type="submit" class="btn">Log In</button>
</form>
</li>
</ul>
</div>
</div>
<!--END Nav Bar-->
<!--Sign-Up Modal-->
<div id="signUpModal"class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="signUpModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">X</button>
<h3 id="myModalLabel" align= "center">Sign Up</h3>
</div>
<div class="modal-body center">
<form class="form-signup" align= "center" method="post" action="signup.php">
<input type="text" class="span3" name="uname" placeholder="Username"><br>
<input type="text" class="span3" name="email" placeholder="Email"><br>
<input type="password" class="span3" name="pass" placeholder="Password"><br>
<button class="btn btn-primary" type="submit">Sign Up</button>
</form>
</div>
</div>
<!--END Sign-Up Modal-->
<!--Jumbotron-->
<div class="container-narrow">
<div class="jumbotron">
<div>
<h1>Vanilla</h1><br>
<div class='input-append'>
<form align="center" method="get" action="search.php">
<input type="text" name="query" placeholder="Search" />
<button type="submit" class='btn add-on'>
<i class="icon-search"></i>
</button>
</form>
</div>
</div>
</div>
<!--END Jumbotron-->
</body>
</html>
CSS:
#signUpModal{
width: 350px;
left: 55%;
}
.container-narrow div.jumbotron{
text-align:center;
position:absolute;
width:95%;
top:30%;
}
.input-append button.add-on {
height: inherit !important;
}