如何以弹出窗口形式制作自适应文本框

时间:2018-10-22 07:41:23

标签: html bootstrap-4

我需要一个弹出窗口来注册选项。所以我用下面的编码,

<li onclick="document.getElementById('signUpId').style.display='block'" style="width:auto;"><a href="#"><span class="glyphicon glyphicon-user"></span>Sign Up</a></li>
                    <div id="signUpId" class="signUpClass">                     
                        <form class="signUp-content animate" style="border:1px solid #ccc">
                            <div class="container">
                                <p class="close" onclick="document.getElementById('signUpId').style.display='none'" style="width:auto;">&times;</p>
                                <h1>Sign Up</h1>
                                <p>Please fill in this form to create an account.</p>
                                <hr>

                                <label for="email"><b>Email</b></label>
                                <input class="textInput_Sign" type="text" placeholder="Enter Email" name="email" required>

                                <label for="psw"><b>Password</b></label>
                                <input class="pwInput_Sign" type="password" placeholder="Enter Password" name="psw" required>

                                <label for="psw-repeat"><b>Repeat Password</b></label>
                                <input class="repeatPwInput_Sign" type="password" placeholder="Repeat Password" name="psw-repeat" required>

                                <label>
                                <input type="checkbox" checked="checked" name="remember" style="margin-bottom:15px"> Remember me
                                </label>

                                <p>By creating an account you agree to our <a href="#" style="color:dodgerblue">Terms & Privacy</a>.</p>

                                <div class="clearfix">
                                    <button type="button" class="cancelbtn" onclick="document.getElementById('signUpId').style.display='none'">Cancel</button>
                                    <button type="submit" class="signupbtn">Sign Up</button>
                                </div>
                            </div>
                        </form>
                    </div>

但是,无法以弹出窗口形式创建响应文本框。enter image description here

enter image description here

有人可以帮助我解决这个问题吗?

2 个答案:

答案 0 :(得分:0)

尝试为他们输入字段的宽度为100%

答案 1 :(得分:-1)

使用引导程序,您只需要在输入元素中添加“ form-control”类。