javascript - Bootstrap 模态中的中心形式

Question

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

这也是 fiddle :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

或使用 display: inline-block; 添加一个 id 并使用 text-align: center 添加类，但所有其他解决方案对我都不起作用。

Answer 1

使用:

class="text-center"

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

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

以上仅在您只需要文本/标签时才有效

下面将修复整个输入。

jsfiddle

问题是 Bootstrap 列系统。如果你想让一列居中，你可以给它类“center-block”，然后将列扩展为该行的总数(12 是最大值)。如果您希望标签显示在全屏输入的旁边，您将必须在中心 block 列 div 中嵌套另一行并处理其中的更多列。