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; 並使用text-align: center上課text-align: center但所有其他解決方案均不適用於我。

Answer 1

使用：

class="text-center"

參見： [1]：http://jsfiddle.net/reh0ookq/1/

我已經在整個表格以及一個輸入中使用了它

以上僅適用於僅需要文本/標簽的情況

下面將修復整個輸入。

jsfiddle

問題是引導列系統。 如果要使列居中，則可以為其指定“中心塊”類，然后將該列擴展為該行的總數（最大值為12）。 如果希望標簽全屏顯示在輸入旁邊，則必須將另一行嵌套在中心塊列div中，並在其中進一步處理列。

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>

添加了EDIT標簽，建議了2種布局。