帶引導程序的並排文本字段3

-1

我試圖將文本字段與文本字段和文本字段上方的標籤並排排列。帶引導程序的並排文本字段3

<form class="form form-horizontal" action="##" method="post" id="registrationForm"> 
     <fieldset> 
      <div class="form-group"> 
       <label class="col-xs-2 control-label" for="first_name" >first name</label> 
       <div class="col-xs-4"> 
        <input type="text" class="form-control" name="first_name" id="first_name" placeholder="first name" title="enter your first name if any."> 
       </div> 
      </div> 
      <div class="form-group"> 
       <label class="col-xs-2 control-label" for="last_name" >Last name</label> 
       <div class="col-xs-4"> 
        <input type="text" class="form-control" name="last_name" id="last_name" placeholder="last name" title="enter your last name if any."> 
       </div> 
      </div> 

      <div class="form-group"> 
       <label class="col-xs-2 control-label" for="phone" >phone</label> 
       <div class="col-xs-4"> 
        <input type="text" class="form-control" name="phone" id="phone" placeholder="enter phone" title="enter your phone number if any."> 
       </div> 
      </div> 

      <div class="form-group"> 
       <label class="col-xs-2 control-label" for="mobile" >mobile</label> 
       <div class="col-xs-4"> 
        <input type="text" class="form-control" name="mobile" id="mobile" placeholder="enter mobile number" title="enter your mobile number if any."> 
       </div> 
      </div> 
      <div class="form-group"> 
       <label class="col-xs-2 control-label" for="email" >email</label> 
       <div class="col-xs-4"> 
        <input type="email" class="form-control" name="email" id="email" placeholder="Email" title="enter your email."> 
       </div> 
      </div> 
      <div class="form-group"> 
       <label class="col-xs-2 control-label" for="password" >password</label> 
       <div class="col-xs-4"> 
        <input type="password" class="form-control" name="password" id="password" placeholder="password" title="enter your password."> 
       </div> 
      </div> 
      <div class="form-group"> 
       <label class="col-xs-2 control-label" for="password2" >password</label> 
       <div class="col-xs-4"> 
        <input type="password" class="form-control" name="password2" id="password2" placeholder="password2" title="enter your password2."> 
       </div> 
      </div> 
      <div class="form-group"> 
       <label class="col-xs-2 control-label"></label> 
       <div class="col-xs-4"> 
        <input type="checkbox" /> 
        <span class="lbl">User Agreement</span> 
       </div> 
      </div><br /> 
      <div class="form-actions"> 
       <div class="col-md-offset-2 col-md-4"> 
        <button class="btn btn-sm btn-success" type="submit"> 
         <i class="glyphicon glyphicon-ok-sign"></i> 
         Register 
        </button> 
        &nbsp; &nbsp; 
        <button class="btn btn-sm" type="reset"> 
         <i class="glyphicon glyphicon-repeat"></i> 
         Reset 
        </button> 
       </div> 
      </div> 
     </fieldset> 
    </form>

我使用引導3，誰能告訴我如何通過側標籤來獲取文本字段側上方。謝謝。

來源

2014-03-28 Suleman khan

什麼是您目前是問題有？你可以創建一個小提琴來展示這個問題嗎？ – badAdviceGuy

你的意思是像[這]（http://getbootstrap.com/css/#forms-control-sizes）（在「列大小」部分下） –

@badAdviceGuy - 現在我得到標籤和文本框邊當我嘗試使用Form-inline時，它變得混亂起來。我在找這樣的東西，例如 [https://idp.godaddy.com/shopper_new.aspx?ci=10530&spkey=GDSWNET-130506072552001&transferCart=true&shopper_id_old=] –

試試這個。

這不是最好的方法，但它應該工作。嘗試fiddle

添加到您的CSS：

.control-label { 
    text-align:left !important; 
}

這是HTML：

<form class="form form-horizontal" action="##" method="post" id="registrationForm"> 
     <fieldset> 
      <div class="form-group col-xs-6"> 
       <label class="col-xs-12 control-label" for="first_name" >first name</label> 
       <div class="col-xs-12"> 
        <input type="text" class="form-control" name="first_name" id="first_name" placeholder="first name" title="enter your first name if any."> 
       </div> 
      </div> 
      <div class="form-group col-xs-6"> 
       <label class="col-xs-12 control-label" for="last_name" >Last name</label> 
       <div class="col-xs-12"> 
        <input type="text" class="form-control" name="last_name" id="last_name" placeholder="last name" title="enter your last name if any."> 
       </div> 
      </div> 

      <div class="form-group col-xs-6"> 
       <label class="col-xs-12 control-label" for="phone" >phone</label> 
       <div class="col-xs-12"> 
        <input type="text" class="form-control" name="phone" id="phone" placeholder="enter phone" title="enter your phone number if any."> 
       </div> 
      </div> 

      <div class="form-group col-xs-6"> 
       <label class="col-xs-12 control-label" for="mobile" >mobile</label> 
       <div class="col-xs-12"> 
        <input type="text" class="form-control" name="mobile" id="mobile" placeholder="enter mobile number" title="enter your mobile number if any."> 
       </div> 
      </div> 
      <div class="form-group col-xs-6"> 
       <label class="col-xs-12 control-label" for="email" >email</label> 
       <div class="col-xs-12"> 
        <input type="email" class="form-control" name="email" id="email" placeholder="Email" title="enter your email."> 
       </div> 
      </div> 
      <div class="form-group col-xs-6"> 
       <label class="col-xs-12 control-label" for="password" >password</label> 
       <div class="col-xs-12"> 
        <input type="password" class="form-control" name="password" id="password" placeholder="password" title="enter your password."> 
       </div> 
      </div> 
      <div class="form-group col-xs-6"> 
       <label class="col-xs-12 control-label" for="password2" >password</label> 
       <div class="col-xs-12"> 
        <input type="password" class="form-control" name="password2" id="password2" placeholder="password2" title="enter your password2."> 
       </div> 
      </div> 
      <div class="form-group col-xs-12"> 
       <label class="col-xs-2 control-label"></label> 
       <div class="col-xs-4"> 
        <input type="checkbox" /> 
        <span class="lbl">User Agreement</span> 
       </div> 
      </div><br /> 
      <div class="form-actions col-xs-12"> 
       <div class="col-md-offset-2 col-md-4"> 
        <button class="btn btn-sm btn-success" type="submit"> 
         <i class="glyphicon glyphicon-ok-sign"></i> 
         Register 
        </button> 
        &nbsp; &nbsp; 
        <button class="btn btn-sm" type="reset"> 
         <i class="glyphicon glyphicon-repeat"></i> 
         Reset 
        </button> 
       </div> 
      </div> 
     </fieldset> 
    </form>

來源

2014-03-28 15:36:17

在這裏我得到了一個問題是標籤在場上的右側。 –

好吧，我編輯了我的答案。 –

與display:inline-block拉昇DIV form-group。

入住這fiddle

CSS

.form-group{ 
    display:inline-block; 
    width:45%; //Change as you need 
}

來源

2014-03-28 15:48:47 James

從標籤把你的標籤form-group內，並刪除col-xs-2：

http://www.bootply.com/125656

來源

2014-03-28 17:22:47 ZimSystem

帶引導程序的並排文本字段3

回答

相關問題