简单的表单-控制标签和输入的宽度(with bootstrap)
Simple Form- control width of label and input (with bootstrap)
我正在使用 Simple_form 和 Bootstrap。
我想使用水平包装器,但我需要使标签更宽,输入更窄。我想用 bootstrap 4 与自定义 css.
来做到这一点
标签和输入应该在同一行(内联),并且右对齐。
col-md-8 用于标签,col-md-4 用于输入。我该怎么做?
<%= f.input :role, :wrapper =>:horizontal_range, input_wrapper_html: { class: "col-md-4"}, label_wrapper_html: {class: "col-md-8"} %>
编辑:我应该补充说 f.input :role 包含在
<div class='row'>
<div class='col-md-6">
f.input :role
</div>
</div>
第二,
我需要在输入的末尾添加一个 %。然而,它似乎不起作用。
<%= f.input :pct_of_car , append: "%", :wrapper =>:horizontal_range %>
但是,这似乎不起作用。我的语法有什么问题?
第三,如何修改垂直 collection_inline 以具有 2 或 3 列?
# vertical input for inline radio buttons and check boxes
config.wrappers :bs_vertical_collection_inline, item_wrapper_class: 'form-check form-check-inline', tag: 'fieldset', class: 'form-group', error_class: 'form-group-invalid', valid_class: 'form-group-valid' do |b|
b.use :html5
b.optional :readonly
b.wrapper :legend_tag, tag: 'legend', class: 'col-form-label pt-0' do |ba|
ba.use :label_text
end
b.use :input, class: 'form-check-input', error_class: 'is-invalid', valid_class: 'is-valid'
b.use :full_error, wrap_with: { tag: 'div', class: 'invalid-feedback d-block' }
b.use :hint, wrap_with: { tag: 'small', class: 'form-text text-muted' }
end
目前所有的复选框都是内联列出的,没有结构。我需要在 2 或 3 列中列出选项,以便于阅读。这也是一个很长的列表,因此可能需要将选项包装在滚动框中。
要为input
和label
设置class,请使用input_html
和label_html
:
<%= f.input :role, :wrapper => :horizontal_range, input_html: { class: "col-md-4"}, label_html: {class: "col-md-8"} %>
关于第二个问题 - 如果您不使用提示,最简单的解决方案可能是这样做:
<%= f.input :pct_of_car , hint: "%", :wrapper =>:horizontal_range %>
然后,您可以通过使用 hint_html
选项(类似于 input_html
和 label_html
)向提示添加自定义 class 来设置样式。
更新
添加自定义文本的更好解决方案是使用块输入:
<%= f.input(:role, :wrapper => :horizontal_range, label_html: {class: "col-md-8"}) do %>
<div class='col-md-4'>
<%= f.input(:role, components: [:input], :wrapper => false, label: false) %>
<span>%</span>
</div>
<% end %>
因此,您的标签有 col-md-8
class,您的文本输入被包裹在 div 和 col-md-4
class 中。
您需要定义自己的自定义包装器或修改默认包装器。
首先,确保您的存储库中有默认包装器。
运行 rails g simple_form:install --bootstrap
如果找不到 app/initializers/simple_form_bootstrap.rb
.
其次,在此初始化程序中找到 Bootstrap 网格 类。对于水平形式,它们位于如下所示的块中:
config.wrappers :horizontal_form, tag: 'div', class: 'form-group', error_class: 'has-error' do |b|
b.use :html5
b.use :placeholder
b.optional :maxlength
b.optional :minlength
b.optional :pattern
b.optional :min_max
b.optional :readonly
b.use :label, class: 'col-sm-3 control-label'
b.wrapper tag: 'div', class: 'col-sm-9' do |ba|
ba.use :input, class: 'form-control'
ba.use :error, wrap_with: { tag: 'span', class: 'help-block' }
ba.use :hint, wrap_with: { tag: 'p', class: 'help-block' }
end
end
第三,换包装!
在此代码段中,将 col-sm-9
更改为 col-sm-8
。
同时将 col-sm-3
更改为 col-sm-4
.
完成
保存。重新启动您的 Rails 服务器。现在所有表单都有 33% 宽度的标签和 66% 宽度的输入。
如果您不想全局应用它,请将 wrapper: :my_wrapper
选项传递给任何 input
并创建一个新的自定义包装器来执行您希望它执行的操作。
一定要喜欢 SimpleForm!
我正在使用 Simple_form 和 Bootstrap。
我想使用水平包装器,但我需要使标签更宽,输入更窄。我想用 bootstrap 4 与自定义 css.
来做到这一点标签和输入应该在同一行(内联),并且右对齐。
col-md-8 用于标签,col-md-4 用于输入。我该怎么做?
<%= f.input :role, :wrapper =>:horizontal_range, input_wrapper_html: { class: "col-md-4"}, label_wrapper_html: {class: "col-md-8"} %>
编辑:我应该补充说 f.input :role 包含在
<div class='row'>
<div class='col-md-6">
f.input :role
</div>
</div>
第二,
我需要在输入的末尾添加一个 %。然而,它似乎不起作用。
<%= f.input :pct_of_car , append: "%", :wrapper =>:horizontal_range %>
但是,这似乎不起作用。我的语法有什么问题?
第三,如何修改垂直 collection_inline 以具有 2 或 3 列?
# vertical input for inline radio buttons and check boxes
config.wrappers :bs_vertical_collection_inline, item_wrapper_class: 'form-check form-check-inline', tag: 'fieldset', class: 'form-group', error_class: 'form-group-invalid', valid_class: 'form-group-valid' do |b|
b.use :html5
b.optional :readonly
b.wrapper :legend_tag, tag: 'legend', class: 'col-form-label pt-0' do |ba|
ba.use :label_text
end
b.use :input, class: 'form-check-input', error_class: 'is-invalid', valid_class: 'is-valid'
b.use :full_error, wrap_with: { tag: 'div', class: 'invalid-feedback d-block' }
b.use :hint, wrap_with: { tag: 'small', class: 'form-text text-muted' }
end
目前所有的复选框都是内联列出的,没有结构。我需要在 2 或 3 列中列出选项,以便于阅读。这也是一个很长的列表,因此可能需要将选项包装在滚动框中。
要为input
和label
设置class,请使用input_html
和label_html
:
<%= f.input :role, :wrapper => :horizontal_range, input_html: { class: "col-md-4"}, label_html: {class: "col-md-8"} %>
关于第二个问题 - 如果您不使用提示,最简单的解决方案可能是这样做:
<%= f.input :pct_of_car , hint: "%", :wrapper =>:horizontal_range %>
然后,您可以通过使用 hint_html
选项(类似于 input_html
和 label_html
)向提示添加自定义 class 来设置样式。
更新
添加自定义文本的更好解决方案是使用块输入:
<%= f.input(:role, :wrapper => :horizontal_range, label_html: {class: "col-md-8"}) do %>
<div class='col-md-4'>
<%= f.input(:role, components: [:input], :wrapper => false, label: false) %>
<span>%</span>
</div>
<% end %>
因此,您的标签有 col-md-8
class,您的文本输入被包裹在 div 和 col-md-4
class 中。
您需要定义自己的自定义包装器或修改默认包装器。
首先,确保您的存储库中有默认包装器。
运行 rails g simple_form:install --bootstrap
如果找不到 app/initializers/simple_form_bootstrap.rb
.
其次,在此初始化程序中找到 Bootstrap 网格 类。对于水平形式,它们位于如下所示的块中:
config.wrappers :horizontal_form, tag: 'div', class: 'form-group', error_class: 'has-error' do |b|
b.use :html5
b.use :placeholder
b.optional :maxlength
b.optional :minlength
b.optional :pattern
b.optional :min_max
b.optional :readonly
b.use :label, class: 'col-sm-3 control-label'
b.wrapper tag: 'div', class: 'col-sm-9' do |ba|
ba.use :input, class: 'form-control'
ba.use :error, wrap_with: { tag: 'span', class: 'help-block' }
ba.use :hint, wrap_with: { tag: 'p', class: 'help-block' }
end
end
第三,换包装!
在此代码段中,将 col-sm-9
更改为 col-sm-8
。
同时将 col-sm-3
更改为 col-sm-4
.
完成
保存。重新启动您的 Rails 服务器。现在所有表单都有 33% 宽度的标签和 66% 宽度的输入。
如果您不想全局应用它,请将 wrapper: :my_wrapper
选项传递给任何 input
并创建一个新的自定义包装器来执行您希望它执行的操作。
一定要喜欢 SimpleForm!