1. 首頁
  2. 問答
  3. 如何將寬度設置爲自舉類型下的輸入文本字段

如何將寬度設置爲自舉類型下的輸入文本字段

2015-10-14 101 views
0

在下面的佈局中，單個最後一個文本字段（用戶名）的大小不正確。我嘗試了很多方法，但沒有任何效果。請分享任何想法。我的代碼是如何將寬度設置爲自舉類型下的輸入文本字段

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

來源

2015-10-14 veera

+0

@Torean的OP沒有縮進自己的代碼，我在編輯固定它。 –

+0

您是否希望文本字段水平旁邊的標籤或保持原樣，只是讓字段完全相同（最後一個字段與上面的字段相同）？ – TrojanMorse

+0

行和col-lg-12具有100％寬度並具有適當的邊距和填充。你不應該在一個元素上使用兩者。而是在行內嵌套。 –

回答

0

設置使用類似.input-lg和.input-sm.

設置使用像.col-lg-*和.col-sm-*網格列類元素的寬度，輸入元件的高度。

bootstrap

來源

2015-10-14 16:45:40

+1

爲什麼不只是參考[Bootstraps官方網站]（http://getbootstrap.com/css/#grid）？ –

+0

這只是一個快速搜索，但我會改變它。 –

0

如果所有你關心的是最後輸入的大小，然後更改此：

你有col-lg-12 row與col-lg-6它裏面，去掉col-lg-6並改變col-lg-12 row到col-lg-6 row。

話雖這麼說，我已經提供了使用默認的自舉類和標準佈局forms，可以幫助爲你在同一個div與rows混合col-*-*那就是網格而不是如何構建兩種可供選擇的佈局。

查看您的原始代碼（*固定）和兩個樣本的工作示例。

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

來源

2015-10-14 18:08:40 vanburen

相關問題

 相關問題