ruby-on-rails - Rails simple_form - 垂直对齐单选按钮

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类添加样式定义 block_radio_button_collection在你的 css 文件中。

.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 .