表单输入的 Bootstrap 3 和简单表单显示问题

Question

最近在 Rails 应用上升级到 Bootstrap 3。 SimpleForm 文本框和其他表单输入太大 - 它们错误地是整页长度。该应用程序确实具有响应式设计，并且表单输入框确实会调整大小。 我想将表单输入大小限制为 50% 而不是整页。 我确实添加了这个初始化要点https://gist.github.com/tokenvolt/6599141，但它似乎没有效果。

我不熟悉 Bootstrap3/Simpleform2.1.1 的冲突。

我在 application.css.scss 中将宽度调整为 50%，但这并没有做出彻底的改变

/* forms */

input, textarea, select, .uneditable-input {
  border: 1px solid #bbb;
  width: 100%;
  padding: 10px;
  margin-bottom: 15px;
  @include box_sizing;
}

Answer 1

长度是指宽度吗？如果您不希望表单太宽，您可以将页面分成列，然后将表单放入较小的列中。

<div class="row">
  <div class="col-sm-6 col-sm-offset-3">
    <%= simple_form-for...
  </div>
</div>

Bootstrap 使用网格系统将页面分为 12 列。如果您只是将表单放在上面，它将占用所有 12 列（整个页面），因此您需要指定您希望表单占用多少列。这是一篇真正帮助我理解新网格系统的帖子：http://blog.jetstrap.com/2013/08/bootstrap-3-grids-explained/