【问题标题】:Bootstrap 3 and Simple Form display issue with form inputs表单输入的 Bootstrap 3 和简单表单显示问题
【发布时间】:2014-02-10 00:22:26
【问题描述】:

最近在 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;
}

【问题讨论】:

    标签: ruby-on-rails forms twitter-bootstrap


    【解决方案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/

    【讨论】:

    • 我绝对不希望它太宽。抱歉,我是新手 - 这些行会出现在 show.html 页面上吗?
    • 是的,您可以将上述代码中的表单包装到您之前拥有该表单的任何页面上。我还编辑了答案以帮助您获得更多帮助。
    • 非常感谢,Mlennie。会试试的。
    • 不用担心。如果它最终对您有所帮助,您介意将我的答案标记为正确答案吗?谢谢
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2020-06-14
    • 2014-04-20
    • 2015-12-07
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多