Rails简单形式Bootstrap - 复选框内联垂直对齐
我有一个简单的形式和引导的rails 4应用程序。Rails简单形式Bootstrap - 复选框内联垂直对齐
我在我的表单中有复选框元素。我想使复选框与其他字段中的内容垂直对齐。此时复选框比其他字段中的其余内容更进一步。
例如:
<%= f.input :experiment, :as => :boolean, :label => false, inline_label: 'Do you want experiment logs or methods?' %>
有谁知道如何使垂直排列均匀,从而复选框未出的表单元素的其余部分的左边?
谢谢
就上述扩大,
我想留的复选框与其他表单元素的左边缘对齐。目前,它进一步离开(就像该复选框元素上存在某种负边界)。
我希望所有三个这些现场输入在左对齐齐平。目前,在这两个布尔元素的复选框,比第三个文本框进一步左:
<%= f.input :survey, :as => :boolean, :label => false, inline_label: 'Do you need survey responses?' %>
<br><br>
<%= f.input :survey_link, label: 'Where is your survey?', :label_html => { :class => 'question-data' }, placeholder: 'Include a link to your survey', :input_html => {:style=> 'width: 650px; margin-top: 20px', class: 'response-project'} %>
<br>
<%= f.input :experiment, :as => :boolean, :label => false, inline_label: 'Do you want experiment logs or methods?' %>
由于DOC这里http://montrezorro.github.io/bootstrap-checkbox/建议你应该有data-label
在你的输入,因此改变你的输入这样的:
<%= f.input :experiment, :as => :boolean, :label => false, :input_html => { :'data-label' => 'Do you want experiment logs or methods?' } %>
如果你想在前面加上然后:
<%= f.input :experiment, :as => :boolean, :label => false, :input_html => { :'data-label-prepend' => 'Do you want experiment logs or methods?' } %>
嗨尼廷,恐怕我得到一个错误,当我尝试这样做,其中读取:语法错误,意外的':',期待=> – Mel 2014-09-24 08:57:04
尝试用我更新的答案。我已经使语法对称。 – 2014-09-24 09:13:08
您是否仍然收到任何错误 – 2014-09-24 10:05:33
我做了一个自定义包装是这样的:
config.wrappers :inline_checkbox, tag: 'div', class: 'form-group', error_class: 'has-error' do |b|
b.use :html5
b.optional :readonly
b.wrapper tag: 'div', class: 'col-sm-10 col-sm-offset-2' do |ba|
ba.wrapper tag: 'div', class: 'checkbox' do |baa|
baa.use :input
end
#ba.use :input
ba.use :error, wrap_with: { tag: 'span', class: 'help-block' }
ba.use :hint, wrap_with: { tag: 'p', class: 'help-block' }
end
end
在我的情况下,我想要一个简单的内联复选框,右边的标签位于另一个表单元素的下方。您可能需要玩col-sm-10 col-sm-offset-2
。这在你的SimpleForm初始化器中(或者做一个单独的一行,以避免破坏原始内容)。此外,您需要重新启动应用以查看更改才能生效。
如果您向我们展示演示会很棒。目前还不清楚你想达到什么目标。 – ProblemSlover 2014-09-23 11:06:23
嗨 - 我在上面添加了一个例子。两个复选框元素位于文本输入元素的左侧。我想他们都齐平 – Mel 2014-09-24 07:12:59