Boostrap自动堆叠表单而不是替换模态。

时间:2017-04-21 20:47:25

标签: html twitter-bootstrap

我正在尝试设置一个带有标签的模态。这是用于登录/注册。但是,它不是仅仅在单击时替换注册表单,而是将其堆叠在登录表单下方。 Bootply链接:http://www.bootply.com/5ssZsWHIzv

任何帮助将不胜感激!

1 个答案:

答案 0 :(得分:1)

您的col-md-6班级位置错误,您应将两列嵌套在标签内容div之外。我修改了代码。

Bootply:http://www.bootply.com/fE04YpZxgN

<button class="btn btn-primary btn-sm" href="#signup" data-toggle="modal" data-target=".bs-modal-sm" style="margin-top: 10px">Sign In/Register
</button>


<div class="modal fade bs-modal-sm" id="signupModal" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content clearfix">
            <br>
            <div class="bs-example bs-example-tabs">
                <ul id="myTab" class="nav nav-tabs">
                    <li class="active"><a href="#signinTab" data-toggle="tab">Sign In</a></li>
                    <li class=""><a href="#signup" data-toggle="tab">Register</a></li>
                </ul>
            </div>
            <div class="modal-body">
                <div class="col-md-6">  
                    <div id="myTabContent row" class="tab-content">

                        <div role="tabpanel" class="tab-pane fade active in" id="signinTab">
                            <form class="form-horizontal" id="loginForm">
                                <fieldset>
                                    <!-- Sign In Form -->
                                    <!-- Text input-->
                                    <div id="loginErrors">

                                    </div>

                                    <div class="control-group">
                                        <label class="control-label" for="loginEmail">Email:</label>
                                        <div class="controls">
                                            <input id="loginEmail" name="email" type="text" class="form-control" placeholder="username@example.com">
                                        </div>
                                    </div>

                                    <!-- Password input-->
                                    <div class="control-group">
                                        <label class="control-label" for="passwordinput">Password:</label>
                                        <div class="controls">
                                            <input id="passwordinput" name="passwordinput" class="form-control" type="password" placeholder="********">
                                        </div>
                                    </div>

                                    <!-- Button -->
                                    <div class="control-group">
                                        <label class="control-label" for="signin"></label>
                                        <div class="controls">
                                            <div class="btn-toolbar">
                                                <button id="signin" name="signin" class="btn btn-success">Sign In
                                                </button>
                                                <button type="button" id="closeModal" class="btn btn-default" data-dismiss="modal">
                                                    Close
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </fieldset>
                            </form>
                        </div>
                        <div role="tabpanel" class="tab-pane fade" id="signup">
                        <form class="form-horizontal" id="signUpForm">
                            <fieldset>
                                <!-- Sign Up Form -->
                                <div id="signUpErrors">

                                </div>
                                <!-- Text input-->
                                <div class="control-group">
                                    <label class="control-label" for="Email">Email:</label>
                                    <div class="controls">
                                        <input id="Email" name="Email" class="form-control" type="text" placeholder="example@example.com">
                                    </div>
                                </div>

                                <!-- Text input-->
                                <div class="control-group">
                                    <label class="control-label" for="userid">First Name:</label>
                                    <div class="controls">
                                        <input id="firstName" name="firstName" class="form-control" type="text" placeholder="John">
                                    </div>
                                </div>
                                <div class="control-group">
                                    <label class="control-label" for="userid">Last Name:</label>
                                    <div class="controls">
                                        <input id="lastName" name="lastName" class="form-control" type="text" placeholder="Smith">
                                    </div>
                                </div>


                                <!-- Password input-->
                                <div class="control-group">
                                    <label class="control-label" for="password">Password:</label>
                                    <div class="controls">
                                        <input id="password" name="password" class="form-control" type="password" placeholder="********">
                                        <em>Must have atleast one number</em>
                                    </div>
                                </div>

                                <!-- Text input-->
                                <div class="control-group">
                                    <label class="control-label" for="reenterpassword">Re-Enter
                                        Password:</label>
                                    <div class="controls">
                                        <input id="reenterpassword" class="form-control" name="reenterpassword" type="password" placeholder="********">
                                    </div>
                                </div>
                                <!-- Button -->
                                <div class="control-group">
                                    <label class="control-label" for="confirmsignup"></label>
                                    <div class="controls">
                                    <div class="btn-toolbar">
                                        <button id="confirmsignup" name="confirmsignup" class="btn btn-success">Sign Up
                                        </button>
                                        <button type="button" id="closeModal" class="btn btn-default" data-dismiss="modal">
                                            Close
                                        </button>
                                    </div>
                                    </div>
                                </div>
                            </fieldset>
                        </form>
                        </div>

                    </div>
                </div>
                <div class="col-md-6 pull-right">
                    <a class="btn btn-block btn-social btn-facebook">
                        <span class="fa fa-facebook"></span> Sign in with Facebook
                    </a>

                    <a class="btn btn-block btn-social btn-foursquare">
                        <span class="fa fa-foursquare"></span> Sign in with Foursquare
                    </a>

                    <a class="btn btn-block btn-social btn-openid">
                        <span class="fa fa-openid"></span> Sign in with OpenID
                    </a>

                    <a class="btn btn-block btn-social btn-google">
                        <span class="fa fa-google"></span> Sign in with Google
                    </a>

                    <a class="btn btn-block btn-social btn-google">
                        <span class="fa fa-google"></span> Sign in with Google
                    </a>
                </div>

            </div>
        </div>
    </div>
</div>