0

我正在使用引导程序 3。

将表格水平居中的最佳方式是什么？

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

2 回答 2

0

如果您需要将表格居中，您有两种选择：

  1. 您可以在 (col-) 中使用您想要的值（例如：col-sm-6）。

  2. 您可以在 (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"作为上面的例子。

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

于 2013-10-02T13:07:08.673 回答
0

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

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

演示

于 2013-10-02T11:43:45.347 回答