在Bootstrap Modal中居中表单

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;"，像这样。

或者使用带有 display: inline-block; 的id和带有 text-align: center 的class，但是所有其他解决方案对我都没有用。

- Bernd

Answer 1

使用：

class="text-center"

请看：

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

我在整个表单上都使用了它，还有一个输入框

如果你只想要文本/标签，上述内容才有效

下面将修复整个输入框。

jsfiddle

问题出在bootstrap列系统上。如果你想让一列居中，你可以给它加上类"center-block"，然后把该列扩展到该行的总和（12是最大值）。如果你想让标签显示在全屏幕旁边的输入框中，你需要在center-block列div里面嵌套另一行，并在其中处理更多的列。

- JarODirt

---

嘿，谢谢你的回答，但我想要完整的输入字段，带有标签位于模态框中间...！ - Bernd

哦，那你的列可能弄错了。这是一个更新的示例，如果你想在全屏时将标签放在侧边栏上，你可能需要进行一些调整 jsfiddle。 - JarODirt

Answer 2

如果你想让实际输入框居中，你需要一些偏移量。没有一个 col-*-* 类可以使其出现在行的中心，但是你可以使用偏移量来实现：

带有标签的更新 Bootply

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

- Tim Lewis