Question

我已经在bootstrap的帮助下设置了我的页面。访问：hubb.tekkkz.com 我有一个问题，如果你点击右边的登录/注册，模式出现。但！用户输入元素不像父容器那样宽，因此元素和模态之间左边的自由空间低于右侧。

如何使元素具有完整的容器/父级宽度？

<div class="modal fade bs-example-modal-sm" id="loginModal" tabindex="-1" role="dialog" aria-labelledby="loginModal" aria-hidden="true">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true"><span class="glyphicon glyphicon-remove"></span></span></button>
                <h4 class="modal-title" id="exampleModalLabel">Login</h4>
            </div>
            <div class="modal-body">
                <form action="" method="post">
                    <p><input type="text" class="form-control" placeholder="Username" name="username" value=""></p>
                    <p><input type="password" class="form-control" placeholder="Password" name="password" value=""></p>
                    <p><input class="btn btn-primary form-control" type="submit" value="Login"></p>
                </form>
            </div>
        </div>
    </div>

Answer 1

创建一个新类将此类添加到modelinputs

.form-control-login { 
width: 100% !important;  
}

Answer 2

添加以下css

#loginModal .form-inline .form-control, 
#registerModal .form-inline .form-control {
  width: 100%!important;
}

模态中的Bootstrap用户输入

2 个答案: