Ruby on rails 简单表单-控制标签和输入的宽度(带引导)
我使用简单的形式和引导 我想使用水平包装,但我需要使标签更宽,输入更窄。我想用Bootstrap4和定制css来实现这一点 标签和输入应在同一行(内联),并右对齐 col-md-8表示标签,col-md-4表示输入。我该怎么做Ruby on rails 简单表单-控制标签和输入的宽度(带引导),ruby-on-rails,twitter-bootstrap,simple-form,ruby-on-rails-5.2,Ruby On Rails,Twitter Bootstrap,Simple Form,Ruby On Rails 5.2,我使用简单的形式和引导 我想使用水平包装,但我需要使标签更宽,输入更窄。我想用Bootstrap4和定制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, :wrapper =>:horizontal_range, input_wrapper_html: { class: "col-md-4"}, label_wrapper_html: {class: "col-md-8"} %>
目前,所有复选框都是内联列出的,没有结构。我需要在2列或3列中列出选项,以便更容易阅读。这也是一个很长的列表,因此可能需要将选项包装在一个滚动框中。要为
输入设置类
和标签
,请使用输入html
和标签
:
<%= f.input :role, :wrapper => :horizontal_range, input_html: { class: "col-md-4"}, label_html: {class: "col-md-8"} %>
正因为如此,您的标签具有
col-md-8
类,您的文本输入被包装在带有col-md-4
类的div中。您需要定义自己的自定义包装器或修改默认包装器
首先,确保存储库中有默认包装器。
如果找不到app/initializers/simple\u form\u bootstrap.rb,请运行rails g simple\u form:install--bootstrap
其次,在此初始值设定项中找到引导网格类。对于水平形状,它们位于如下所示的块中:
第三,更换包装!
在此代码段中,将col-sm-9
更改为col-sm-8
。
同时将col-sm-3
更改为col-sm-4
结束
保存。重新启动Rails服务器。现在所有表单都将有33%的宽度标签和66%的宽度输入
如果不想全局应用此选项,请将wrapper::my_wrapper
选项传递给任何输入
,并创建一个新的自定义包装器,该包装器执行您希望它执行的操作
一定要爱SimpleForm 我需要的标签和输入都在同一行(所有内联)。出于某种原因,您的方法会将输入放到下一行,有什么想法吗?我猜这是因为:水平范围结构。你能把它添加到问题中吗?@user2012677 by:水平范围
我指的是包装器的代码,它可能在config/initializers/simple\u form.rb中定义
<%= f.input :pct_of_car , append: "%", :wrapper =>:horizontal_range %>
# 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
<%= 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 %>
<%= 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 %>
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