Question

我正在使用的当前版本的Bootstrap中的模态（如果我没有记错的话，是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;
}

Bootstrap模态组件快速出现/慢慢消失

0 个答案: