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

来源

2014-09-23 Mel

如果您向我们展示演示会很棒。目前还不清楚你想达到什么目标。 – ProblemSlover 2014-09-23 11:06:23

嗨 - 我在上面添加了一个例子。两个复选框元素位于文本输入元素的左侧。我想他们都齐平 – Mel 2014-09-24 07:12:59

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

来源

2014-09-23 11:54:27

嗨尼廷，恐怕我得到一个错误，当我尝试这样做，其中读取：语法错误，意外的'：'，期待=> – 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初始化器中（或者做一个单独的一行，以避免破坏原始内容）。此外，您需要重新启动应用以查看更改才能生效。

来源

2017-04-23 04:15:34

Rails简单形式Bootstrap - 复选框内联垂直对齐

回答

相关问题