如何在类

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.

等类设置输入元素的高度      

使用.col-lg-*和.col-sm-*等网格列类设置元素的宽度。

bootstrap

Answer 2

如果你所关心的只是最后一个输入的大小，那么改变它：

您的col-lg-12 row内有col-lg-6，删除col-lg-6并将col-lg-12 row更改为col-lg-6 row。

话虽如此，我已经提到了两种使用bootstrap默认类和forms标准布局的替代布局，这可能有助于您将col-*-*与rows混合使用在同一个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>

＆＃13;

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;