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

Question

我有一个具有简单表单和 Bootstrap 的 Rails 4 应用程序。

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

例如:

<%= f.input :experiment, :as => :boolean, :label => false, inline_label: 'Do you want experiment logs or methods?'  %>

有谁知道如何使垂直对齐统一，以便复选框不会超出其余表单元素的左侧？

谢谢

为了扩展上述内容，

我希望复选框与其他表单元素的左边缘对齐。目前，它更靠左(就像那个复选框元素上有某种负边距)。

我希望所有这三个字段输入都在左对齐处齐平。目前，两个 bool 元素中的复选框比第三个文本字段更靠左:

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