如何在類下的引導程序中設置輸入文本字段的寬度

Question

在下面的布局中，單獨的最后一個文本字段（UserName）大小不正確。 我嘗試了很多方法，但是沒有任何效果。 請分享任何想法。 我的代碼是

<div id="wrapper">

        <div class="row">
                <div class="col-lg-6  vcenter ">
                    <div class="panel panel-success">
                        <div class="panel-heading text-center">
                            <h4>Login Help</h4>
                        </div>
                        <div class="panel-body">
                            <form role="form">
                                <div class="form-group">

                                    <div class="row col-lg-12 radio">
                                        <label>
                                            <input type="radio" name="userPwd" id="userpwd1" value="option1" checked>Forgot Username
                                        </label>
                                        <div class="form-group col-lg-offset-3" style="margin-top:2%;">
                                            <label>
                                            <input type="radio" name="userMailMob" id="mail1" value="option1" checked>Email
                                            </label>
                                            <label class="form-group col-lg-offset-1">
                                            <input type="radio" name="userMailMob" id="mob1" value="option1">Mobile
                                            </label>
                                        </div>
                                    </div>
                                        <div class="row col-lg-6">
                                            <label>Email Address</label>
                                            <!--<input class="col-lg-offset-1">-->
                                            <input class="form-control col-lg-offset-3" placeholder="E-mail" name="email" type="email" autofocus>
                                        </div>

                                    <div class="radio row col-lg-12" style="margin-top:5%;">
                                        <label>
                                            <input type="radio" name="userPwd" id="userpwd2" value="option2">Forgot Password
                                        </label>
                                        <div class="form-group col-lg-offset-3" style="margin-top:2%;">
                                            <label>
                                            <input type="radio" name="pwdMailMob" id="mail2" value="option1">Email
                                            </label>
                                            <label class="form-group col-lg-offset-1">
                                            <input type="radio" name="pwdMailMob" id="mob2" value="option1">Mobile
                                            </label>
                                        </div>
                                    </div>
                                        <div class="row col-lg-6">
                                            <label>Email Address</label>
                                            <!--<input class="col-lg-offset-1">-->
                                            <input class="form-control col-lg-offset-3" placeholder="E-mail" name="email" type="email">
                                        </div>

                                        <div class="col-lg-12 row">
                                            <div class="col-lg-6">

                                                <label>Username</label>
                                                <input class="form-control col-lg-offset-3" placeholder="Username" name="uname" type="text">
                                            </div>
                                        </div>


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

Answer 1

使用.input-lg和.input-sm.等類設置輸入元素的高度.input-sm.

使用諸如.col-lg-*和.col-sm-*類的網格列類設置元素的寬度。

引導程序

Answer 2

如果您只關心最后一個輸入的大小，請更改以下內容：

您有col-lg-12 row其中有col-lg-6 col-lg-12 row ，刪除col-lg-6並將col-lg-12 row更改為col-lg-6 row 。

話雖這么說，但我已經包括了兩種替代布局，它們使用了引導程序默認類和標准布局來生成表單 ，這可能會在您將col-*-*與同一div rows混合在一起時提供幫助，而這並不是網格的結構方式。

請參閱帶有原始代碼（*固定）和兩個示例的工作示例。

<div class="col-lg-6 row">
  <label>Username</label>
    <input class="form-control col-lg-offset-3" placeholder="Username" name="uname" type="text">
</div>

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> <hr> <div class="container"> <div class="row"> <div class="col-lg-6 vcenter "> <div class="panel panel-success"> <div class="panel-heading text-center"> <h4>Login Help (Original)</h4> </div> <div class="panel-body"> <form role="form"> <div class="form-group"> <div class="row col-lg-12 radio"> <label> <input type="radio" name="userPwd" id="userpwd1" value="option1" checked>Forgot Username</label> <div class="form-group col-lg-offset-3" style="margin-top:2%;"> <label> <input type="radio" name="userMailMob" id="mail1" value="option1" checked>Email</label> <label class="form-group col-lg-offset-1"> <input type="radio" name="userMailMob" id="mob1" value="option1">Mobile</label> </div> </div> <div class="row col-lg-6"> <label>Email Address</label> <!--<input class="col-lg-offset-1">--> <input class="form-control col-lg-offset-3" placeholder="E-mail" name="email" type="email" autofocus> </div> <div class="radio row col-lg-12" style="margin-top:5%;"> <label> <input type="radio" name="userPwd" id="userpwd2" value="option2">Forgot Password</label> <div class="form-group col-lg-offset-3" style="margin-top:2%;"> <label> <input type="radio" name="pwdMailMob" id="mail2" value="option1">Email</label> <label class="form-group col-lg-offset-1"> <input type="radio" name="pwdMailMob" id="mob2" value="option1">Mobile</label> </div> </div> <div class="row col-lg-6"> <label>Email Address</label> <!--<input class="col-lg-offset-1">--> <input class="form-control col-lg-offset-3" placeholder="E-mail" name="email" type="email"> </div> <div class="col-lg-6 row"> <label>Username</label> <input class="form-control col-lg-offset-3" placeholder="Username" name="uname" type="text"> </div> </div> </form> </div> </div> </div> </div> </div> <hr> <div class="container"> <div class="row"> <div class="col-md-6 vcenter"> <div class="row"> <div class="panel panel-warning"> <div class="panel-heading text-center"> <h4>Standard Form</h4> </div> <div class="panel-body"> <form role="form"> <div class="form-group"> <div class="col-sm-12"> <div class="radio"> <label> <input type="radio" name="userPwd" id="userpwd1" value="option1" checked>Forgot Username</label> <label> <input type="radio" name="userMailMob" id="mail1" value="option1" checked>Email</label> <label> <input type="radio" name="userMailMob" id="mob1" value="option1">Mobile</label> </div> </div> </div> <div class="form-group"> <div class="col-sm-6"> <label>Email Address</label> <input class="form-control" placeholder="E-mail" name="email" type="email" autofocus/> </div> </div> <div class="form-group"> <div class="col-sm-12"> <div class="radio"> <label> <input type="radio" name="userPwd" id="userpwd2" value="option2">Forgot Password</label> <label> <input type="radio" name="pwdMailMob" id="mail2" value="option1">Email</label> <label> <input type="radio" name="pwdMailMob" id="mob2" value="option1">Mobile</label> </div> </div> </div> <div class="form-group"> <div class="col-sm-6"> <label>Email Address</label> <input class="form-control" placeholder="E-mail" name="email" type="email"> </div> </div> <div class="form-group"> <div class="col-sm-6"> <label>Username</label> <input class="form-control" placeholder="Username" name="uname" type="text"> </div> </div> </form> </div> </div> </div> </div> </div> </div> <hr> <div class="container"> <div class="row"> <div class="col-md-6 vcenter"> <div class="row"> <div class="panel panel-info"> <div class="panel-heading text-center"> <h4>INLINE FORM</h4> </div> <div class="panel-body"> <form role="form" class="form-horizontal"> <div class="form-group"> <div class="col-sm-12"> <label class="radio-inline"> <input type="radio" name="userPwd" id="userpwd1" value="option1" checked/>Forgot Username</label> <label class="radio-inline"> <input type="radio" name="userMailMob" id="mail1" value="option1" checked/>Email</label> <label class="radio-inline"> <input type="radio" name="userMailMob" id="mob1" value="option1">Mobile</label> </div> </div> <div class="form-group"> <label class="control-label col-sm-4">Email Address</label> <div class="col-sm-8"> <input class="form-control" placeholder="E-mail" name="email" type="email" autofocus/> </div> </div> <div class="form-group"> <div class="col-sm-12"> <label class="radio-inline"> <input type="radio" name="userPwd" id="userpwd2" value="option2" />Forgot Password</label> <label class="radio-inline"> <input type="radio" name="pwdMailMob" id="mail2" value="option1" />Email</label> <label class="radio-inline"> <input type="radio" name="pwdMailMob" id="mob2" value="option1" />Mobile</label> </div> </div> <div class="form-group"> <label class="control-label col-sm-4">Email Address</label> <div class="col-sm-8"> <input class="form-control" placeholder="E-mail" name="email" type="email" /> </div> </div> <div class="form-group"> <label class="control-label col-sm-4">Username</label> <div class="col-sm-8"> <input class="form-control" placeholder="Username" name="uname" type="text" /> </div> </div> </form> </div> </div> </div> </div> </div> </div> <hr>