引导模式中的中心表格

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

或添加了ID与display: inline-block;与类别text-align: center但所有其他解决方案，没许多其他解决方案没有为我工作。

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个布局。