Bootstrap Modal中的中心形式

Ber*_*rnd 5 html javascript css jquery twitter-bootstrap

我的问题是,如何在模式中将完整的表格(带有标签的输入字段)居中。

这也是小提琴: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>
Run Code Online (Sandbox Code Playgroud)

我试着像加很多其他的解决方案 style="text-align: center;",并增加了输入style="margin 0 auto;" 筛选

或在display: inline-block;和类中添加了ID,text-align: center但所有其他解决方案均不适用于我。

Jar*_*irt 5

使用:

class="text-center"
Run Code Online (Sandbox Code Playgroud)

参见: [1]:http://jsfiddle.net/reh0ookq/1/

我已经在整个表格以及一个输入中使用了它

以上仅适用于仅需要文本/标签的情况

下面将修复整个输入。

jsfiddle

问题是引导列系统。如果要使列居中,则可以为其指定“中心块”类,然后将该列扩展为该行的总数(最大值为12)。如果希望标签全屏显示在输入旁边,则必须将另一行嵌套在中心块列div内,并在其中进一步处理列。