Question

如何在bootstrap 3.2中居中水平形式？（就表格容器而言）。

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

看到我的示例

＆＃13;

<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>

＆＃13;

Answer 1

使用：

margin:0 auto;

在容器中的CSS？

http://www.bootply.com/drEdh7T8Cd

或div中的表格：

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，如下所示：

＆＃13;

<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>

＆＃13;

Answer 4

＆＃13;

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

＆＃13;

中心水平形式在bootstrap 3

4 个答案: