Question

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

我的表单中有复选框元素。我想将复选框与其他字段中的内容垂直对齐。此时，复选框比其他字段中的其他内容更左侧。

例如：

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

Answer 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?' }   %>

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

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

2 个答案: