Question

我有以下代码：

<%= simple_form_for @comment do |f| %>
    <%= f.input :comment, label: 'Phrase you would like to add:' %>
    <%= f.collection_radio_buttons :options, [[true, 'Positive'] ,[false, 'Negative']], :first, :last, label: 'Emotion' %>
<% end %>

这很好用，但collection_radio_buttons中的单选按钮是并排的。如何将单选按钮垂直叠放在一起？

Answer 1

您还可以使用其他两个选项。

选项1：

为集合中的每个项目分配一个css类，并相应地应用样式。

<%= f.collection_radio_buttons :options, [[true, 'Positive'] ,[false, 'Negative']], :first, :last, label: 'Emotion', item_wrapper_class: :block_radio_button_collection %>

这将包装集合中的每个项目，即每对标签和单选按钮都带有默认的包装器标签，并在其上设置class="block_radio_button_collection"。

然后，您需要在css文件中添加css类block_radio_button_collection的样式定义。

.block_radio_button_collection {
  display: block;
}

选项2：

用块元素包装集合中的每个项目，例如div：

<%= f.collection_radio_buttons :options, [[true, 'Positive'] ,[false, 'Negative']], :first, :last, label: 'Emotion', item_wrapper_tag: :div %>

这会更改集合中每个项目的包装，即每对标签和单选按钮更改为div。

Answer 2

我记得遇到过同样的问题。可能有一种更好的解决方法，但这对我有用：

<%= f.input :options, collection: [[true, 'Positive'], [false, 'Negative']], as: :radio_buttons, label: 'Emotion', label_method: :last } %>

希望它有所帮助。

Rails simple_form - 垂直对齐单选按钮

2 个答案: