Question

我正在使用bootstrap 3。

将表单水平居中的最佳方法是什么？

<div class="container">
  <div class="row">
    <form class="form-horizontal" role="form">
        //form stuff here
    </form>
  </div>
</div>

Answer 1

如果您愿意，可以在表单中添加一些样式，

form {
    margin-left:auto;
    margin-right:auto;
    width:200px;
}

Demo

Answer 2

如果您需要将表单放在中心，您有两个选择：

你可以在你想要的值（col-）里面使用它（例如：col-sm-6）。
您可以在（col-sm-12）

无论哪种方式，您都需要使用此css代码：

.form-control {
  display: block;
  max-width: 550px;
  height: 45px;
  margin: 5px auto;
  padding: 10px 20px;
  vertical-align: middle;
  border: 1px solid #ECECEC;
  border-radius: 4px;
 }

重要的是始终使用 max-width 和您的值，以便表单字段保持此值的较大尺寸，并减小较小的尺寸。

<强>更新

使用上面的css代码并将此代码与您的表单一起使用：

<form class="form-horizontal" role="form">
<legend class="righter">Legend</legend>
<div class="form-group">
    <label for="title" class="col-lg control-label">Title</label>
    <div class="col-lg">
        <input type="text" class="form-control" id="title" placeholder="..." />
    </div>
</div>
<div class="form-group">
    <label for="id" class="col-lg control-label">UUID</label>
    <div class="col-lg">
        <input type="text" class="form-control" id="description" placeholder="..."/>
    </div>
</div>

重要的是使用 class =“col-lg”作为上面的例子。

希望这会有所帮助，或上传您的表单的实时代码，以便我可以提供帮助。

将表单置于引导程序中心？

2 个答案: