부트 스트랩 모달의 중심 폼

Question

내 질문은 모달에 전체 양식 (입력 필드 레이블)을 가운데에 배치하는 방법입니다.

여기에 또한 희곡이 있습니다 : http://jsfiddle.net/beernd/reh0ookq/ 하지만 여기에있는 스 니펫도 작동해야합니다.

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form name="useradd" class="form-horizontal" role="form" method="post"> 
 
     <div class="modal show" id="useradd_modal"> 
 
      <div class="modal-dialog modal-lg"> 
 
      <div class="modal-content"> 
 
        <div class="modal-header"> 
 
         <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button> 
 
         <h4 class="modal-title text-center text-danger">Adding a user</h4> 
 
        </div><!-- /.modal-header --> 
 
        <div class="modal-body"> 
 
         <div class="form-group"> 
 
          <label class="col-sm-2 col-md-2 control-label">Login-Name:</label> 
 
          <div class="col-sm-4 col-md-4"> 
 
          <input class="form-control" type="text" placeholder="Login-Name" value="" name="ua_loginname" required="required" /> 
 
          </div> 
 
         </div> 
 
         <div class="form-group"> 
 
          <label class="col-sm-2 col-md-2 control-label">Firstname:</label> 
 
          <div class="col-sm-3 col-md-3"> 
 
          <input class="form-control" type="text" placeholder="Firstname" value="" name="ua_fname" required="required"/> 
 
          </div> 
 
         </div> 
 
        </div><!-- /.modal-body --> 
 
        <div class="modal-footer"> 
 
        <input class="btn btn-md btn-danger pull-left" data-dismiss="modal" type="submit" value="User add"/> 
 
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
 
        </div><!-- /.modal-footer --> 
 
      </div><!-- /.modal-content --> 
 
      </div><!-- /.modal-dialog --> 
 
     </div><!-- /.modal --> 
 
    </form>

나는 style="text-align: center;"을 추가하고 입력 style="margin 0 auto;"Like this

또는 text-align: center와 display: inline-block; 및 클래스와 ID를 추가했지만 다른 모든 솔루션 didn를에 추가와 같은 다른 많은 솔루션을 시도했습니다 나를 위해 일한 적이 없어.

Answer 1

사용 :

class="text-center" 

참조 : 나는 전체 양식뿐만 아니라, 하나 개의 입력에 그것을 사용하고 [1]: http://jsfiddle.net/reh0ookq/1/

그냥 텍스트/라벨을 원하는 경우에는, 위의에만 작동

다음은 전체 입력을 수정합니다.

jsfiddle

문제는 부트 스트랩 열 시스템입니다. 열을 중앙에 배치하려면 "center-block"클래스를 부여한 다음 해당 행에 대해 합계가되도록 열을 확장하십시오 (최대 12 개). 전체 화면에서 입력 옆에 레이블을 표시하려면 가운데 블록 열 div 안에 다른 행을 중첩시키고 그 안에 다른 열을 처리해야합니다.

Answer 2

실제 입력을 가운데 정렬하려면 일부 오프셋이 필요합니다. 이은 행의 중앙에 표시하게하는 col-*-* 클래스는 아니지만, 당신은 같은 오프셋을 사용할 수 있습니다 레이블이 추가

Updated Bootply with Labels

<div class="container"> 
    <div class="panel panel-info"> 
    <div class="panel-heading"> 
     <h4>Pretend this is a Modal</h4> 
    </div> 
    <div class="panel-body"> 
     <div class="container-fluid"> 
     <div class="row"> 
      <div class="col-xs-2 col-xs-offset-2"> 
      <label>Login-Name</label> 
      </div> 
      <div class="col-xs-4"> 
      <input class="form-control" name="test1" placeholder="Login-Name" type="text"> 
      </div> 
     </div> 
     <div class="row"> 
      <div class="col-xs-2 col-xs-offset-2"> 
      <label>First Name</label> 
      </div> 
      <div class="col-xs-4"> 
      <input class="form-control" name="test2" placeholder="Firstname" type="text"> 
      </div> 
     </div> 
     <hr> 
     <div class="row"> 
      <div class="col-xs-2"> 
      <label>Login-Name</label> 
      </div> 
      <div class="col-xs-10"> 
      <input class="form-control" name="test1" placeholder="Login-Name" type="text"> 
      </div> 
     </div> 
     <div class="row"> 
      <div class="col-xs-2"> 
      <label>First Name</label> 
      </div> 
      <div class="col-xs-10"> 
      <input class="form-control" name="test2" placeholder="Firstname" type="text"> 
      </div> 
     </div> 
     </div> 
    </div> 
    </div> 
</div> 

편집, 제안 된 2 개 레이아웃.