引導程序中的水平表單3

Question

如何將引導程序3.2中的水平表單居中？ （相對於表格容器）。

您可以在http://www.bootply.com/odXfJPlHRV

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div id="signup" style="width:800px;border:1px solid black"> 
 
<form class="form-horizontal no-margin center-block"> 
 
    <div class="form-group center-block"> 
 
     <label for="inputEmail" class="control-label col-xs-2">Email</label> 
 
     <div class="col-xs-2"> 
 
      <input type="email" class="form-control" id="inputEmail" placeholder="Email"> 
 
     </div> 
 
    </div> 
 
    <div class="form-group"> 
 
     <label for="inputPassword" class="control-label col-xs-2">Password</label> 
 
     <div class="col-xs-2"> 
 
      <input type="password" class="form-control" id="inputPassword" placeholder="Password"> 
 
     </div> 
 
    </div> 
 
    <div class="form-group last-form-group"> 
 
     <div class="col-xs-offset-2 col-xs-2"> 
 
      <button type="submit" class="btn btn-primary">Create an account</button> 
 
     </div> 
 
    </div> 
 
</form> 
 
</div>

Answer 1

用途看我的例子：

margin:0 auto; 

在容器中的CSS？

http://www.bootply.com/drEdh7T8Cd

或者在專區內的形式：

http://www.bootply.com/AlDBmmEtin

Answer 2

交換班，.col-xs-2爲.col-xs-6。

然後申請一個text-align: right;到<label>和text-align:left;並設置固定width到<input>

如果你想添加標籤之間更多的空間 - 輸入添加col-xs-offset-*

檢查，看是否是預期的結果：

BOOTPLY DEMO

Answer 3

進近時將使用col-*-offset-* classes將標籤和按鈕向右移動以使其居中 - Bootply example。

在這種情況下，每個標籤和輸入都有.col-xs-2，那麼會有6列可用。因此，你可以使用col-xs-offset-3如下：關於什麼

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div id="signup"> 
 
<form class="form-horizontal no-margin"> 
 
    <div class="form-group"> 
 
     <label for="inputEmail" class="control-label col-xs-offset-3 col-xs-2">Email</label> 
 
     <div class="col-xs-2"> 
 
      <input type="email" class="form-control" id="inputEmail" placeholder="Email"> 
 
     </div> 
 
    </div> 
 
    <div class="form-group"> 
 
     <label for="inputPassword" class="control-label col-xs-offset-3 col-xs-2">Password</label> 
 
     <div class="col-xs-2"> 
 
      <input type="password" class="form-control" id="inputPassword" placeholder="Password"> 
 
     </div> 
 
    </div> 
 
    <div class="form-group last-form-group"> 
 
     <div class="col-xs-offset-5 col-xs-2"> 
 
      <button type="submit" class="btn btn-primary">Create an account</button> 
 
     </div> 
 
    </div> 
 
</form> 
 
</div>

Answer 4

<div class="row_fluid"> 
 
     <div class="span3">&nbsp; </div> 
 
     <div class="span6"> Add your form in here </div> 
 
     <div class="span3">&nbsp; </div> 
 
    </div>