나란히 부트 스트랩이있는 텍스트 필드 3

Question

텍스트 필드와 텍스트 필드 위에 레이블이있는 텍스트 필드를 나란히 놓으려고합니다.

<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을 사용하고 있습니다. 누구든지 위의 레이블을 사용하여 텍스트 필드를 나란히 배치하는 방법을 알려줄 수 있습니까? 감사.

Answer 1

시도해보십시오.

가장 좋은 방법은 아니지만 제대로 작동해야합니다.

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

을 그리고 이것은 HTML이다 : 당신의 CSS는이를 fiddle

추가를 시도

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

Answer 2

이 사업부 form-group에 대한 display:inline-block와보십시오.

는 확인이 fiddle

CSS는

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

Answer 3

레이블에서 col-xs-2을 form-group 내부에 라벨을 넣고 제거 :

http://www.bootply.com/125656