使用 Twitter Bootstrap 将表单居中

【问题标题】：Centering a Form simply using Twitter Bootstrap使用 Twitter Bootstrap 将表单居中
【发布时间】：2013-12-13 05:40:53
【问题描述】：

我是 bootstrap 和我的代码的新手：

<form method="POST" name="checker" action="process-form-data.php" onsubmit="return blankCheck()">
  <p><input type="text" class="form-control" name="said"></p>
  <p><input type="submit" class="btn btn-success" value="Submit"></p>
</form>

我正在尝试使用引导程序缩短输入文本字段的宽度。当我将标签与引导程序的网格系统一起使用时，我无法再将输入居中。现在输入跨越整个页面，我希望只有大约 20 个字符长。谢谢。这是它的显示方式：web page

【问题讨论】：

您链接到的页面的按钮和输入居中。

标签： javascript jquery html css twitter-bootstrap

【解决方案1】：

使用引导网格系统几乎很容易：只需考虑一个有 12 个块的网格，因此添加 col-md-8 和 col-md-offset-2 表单将居中，宽度为“8 个块”。

我还在下一段中添加了col-md-12 以保持其低调。也许有一种更简洁的方法（例如定义容器），但这种快速修复方法有效。

【讨论】：

你知道如何使用容器，因为我正在另一个页面上工作，我想在引导项下方保留多个项目。
Em 是的，但没有那么多理论。只需在元素中使用container 类，它就会尝试填充所有可用空间。最简单的方法是使用一个大元素（bootstrap 显示一个 div，但我更喜欢使用部分和/或文章，因为它的含义）并将所有内容放入其中。这里有link to bootstrap's containers。