我有一个具有简单表单和 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?' %>
最佳答案
正如文档在这里建议的那样 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?' } %>
关于css - Rails Simple Form Bootstrap - 复选框内联垂直对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25993366/