Rails Simple Form Bootstrap - 复选框内联垂直对齐答案

【问题标题】：Rails Simple Form Bootstrap - checkbox inline vertical alignmentRails Simple Form Bootstrap - 复选框内联垂直对齐
【发布时间】：2026-01-28 06:20:23
【问题描述】：

我有一个带有简单表单和引导程序的 rails 4 应用程序。

我的表单中有复选框元素。我想对齐复选框以与其他字段中的内容垂直对齐。目前，该复选框比其他字段中的其余内容更靠左。

例如：

<%= 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?'  %>

【问题讨论】：

如果您向我们展示演示，那就太好了。目前还不清楚您要达到的目标。
嗨 - 我在上面添加了示例。两个复选框元素位于文本输入元素的左侧。我希望它们都齐平

标签： css ruby-on-rails twitter-bootstrap simple-form

【解决方案1】：

正如这里的文档建议 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?' }   %>

【讨论】：

嗨 Nitin，恐怕我在尝试此操作时遇到错误，内容为：语法错误，意外 ':'，期待 =>
您好 - 不，它没有用。它根本不显示标签，并且框的对齐方式仍然在表单中所有其他输入元素的左侧。还是谢谢
我不知道那是什么意思。当我使用上面的前置行时，有一个框并且没有文本。非常感谢您的尝试。
你发现了吗？我也遇到了同样的问题

【解决方案2】：

我做了一个这样的自定义包装器：

  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 初始化程序中（或单独制作一行以避免破坏原始内容）。您还需要重新启动您的应用才能看到更改生效。

【讨论】：