我想让我的按钮显示内联，也有一个默认值，因为它不能为空。我正在使用plataformatex/simple_form和bootstrap。simple_form_for rails单选按钮内嵌

= f.collection_radio_buttons :is_private, [[true, 'Private'], [false, 'Public']], :first, :last, style: "display:inline", default: true

它呈现这样的：

<span> 
    <input id="workout_is_private_true" name="workout[is_private]" type="radio" value="true" /> 
    <label class="collection_radio_buttons" for="workout_is_private_true">Private</label>  
</span> 
<span> 
    <input id="workout_is_private_false" name="workout[is_private]" type="radio" value="false" /> 
    <label class="collection_radio_buttons" for="workout_is_private_false">Public</label> 
</span>

很明显的是，style:工作不正常，但我不知道什么工作。

继另一个建议我加入

.radio_buttons { display:inline; } 

= f.collection_radio_buttons :is_private, [[true, 'Private'], [false, 'Public']], :first, :last, :item_wrapper_class => 'radio_buttons', :default => true

，并得到：

<span class="radio_buttons"> 
    <input id="workout_is_private_true" name="workout[is_private]" type="radio" value="true" /> 
    <label class="collection_radio_buttons" for="workout_is_private_true">Private</label> 
</span> 
<span class="radio_buttons"> 
    <input id="workout_is_private_false" name="workout[is_private]" type="radio" value="false" /> 
    <label class="collection_radio_buttons" for="workout_is_private_false">Public</label> 
</span>

只是另一个需要注意的是默认值仍然是行不通的。

来源

2012-04-02 trev9065

，您需要通过以下步骤为标签提供内联类：:item_wrapper_class => 'inline'

以下是使用您的代码的示例：

= f.input :is_private, 
      :collection => [[true, 'Private'], [false, 'Public']], 
      :label_method => :last, 
      :value_method => :first, 
      :as => :radio_buttons, 
      :item_wrapper_class => 'inline', 
      :checked => true

编辑：我才意识到，我的答案是更具体的simple_form +引导，因为引导已经给标签的内嵌类时定义的样式。您应该可以使用我的示例，但只需在创建自定义CSS时进行更多的工作即可。

来源

2012-04-03 15:46:57 flynfish

@ trev9065我用你的代码在我的答案中添加了一个例子，你可以试试看看它是否有效？ – flynfish 2012-04-03 16:57:57

谢谢你的工作！你知道如何让他们中的一个默认选中吗？ – trev9065 2012-04-03 17:08:21

是的，我更新了答案。添加'：checked => true' – flynfish 2012-04-03 17:11:23

您可以尝试

f.collection_radio_buttons :options, [[true, 'Yes'] ,[false, 'No']], :first, :last ,:style =>"display:inline", :default => true

不是很确定你用简单的形式，它的宝石，但是这是源或引用上，如果你想让他们在线，您可以尝试

collection_radio_buttons(object, method, collection, value_method, text_method, options = {}, html_options = {}, &block)

来源

2012-04-03 04:24:18

我'试了一下：风格=>“显示：内联“，：default => true'但是不起作用。我也尝试过'：html_options => {：style =>“display：inline”}'，但没有结果。它甚至不显示在源文件中。 – trev9065 2012-04-03 16:46:29

我收到trev9065相同的问题。你找到解决方案吗？ – Mel 2014-08-26 08:39:21

上述答案可能不起作用，因为我没有使用Bootstrap。但还有其他方法。我手动按钮和标签周围的class =“radio-buttons”打了一个div。然后我说这我的样式表（SASS）：

.radio-buttons { 
    margin: .5em 0; 
    span input { 
    float: left; 
    margin-right: .25em; 
    margin-top: -.25em; 
    } 
    #this grabs the MAIN label only for my radio buttons 
    #since the data type for the table column is string--yours may be different 
    label.string { 
    margin-bottom: .5em !important; 
    } 

    clear: both; 
} 

.form-block { 
    clear: both; 
    margin-top: .5em; 
} 

.radio-buttons span { 
    clear: both; 
    display:block; 
}

这将使单选按钮内嵌在所有的框架，虽然这被调整到最好看的Zurb基金会。 ;）

来源

2013-09-29 06:49:32

使用带引导程序3的简单表单，您可以使用radio类以及item_wrapper_class和item_wrapper_tag选项。

= f.collection_radio_buttons :sort, [[foo,bar],[foo,bar], 
    :first, :last, 
    item_wrapper_class: :radio, 
    item_wrapper_tag: :div

来源

2014-07-02 01:33:21 Josh

一个简单的办法：

添加类的项目包装。这门课可以是你选择的任何东西。我使用“内联”在下面的例子：

form.input :my_field, as: 'radio_buttons' wrapper_html: {class: 'inline'}

然后定义一些CSS只适用于单选按钮组（只有实际的单选按钮，而不是在项目标签）：

input.radio_buttons.inline label.radio{ 
    display: inline-block; 
}

下面是这个收益率的一个例子：

The above yields this result

来源

2015-02-26 17:00:02 Ben

也许它已被删除，但使用'as：'radio''给了我一个'没有发现无线电输入错误的输入。 – 2015-10-02 18:55:38

啊，我相信这是“radio_buttons”。更新我的答案，让我们知道如果这有效。对困惑感到抱歉。 – Ben 2015-10-04 01:02:21

只是使用zurb基础用简单形式的chekbox谁的人来到这里：

苗条观点：

= f.input :company_stages, as: :check_boxes, required: true

SCSS：

// simple-form checbox 
.checkbox { 
    margin-right: 20px; 
    display: inline-block; 
}

来源

2015-11-16 14:51:45 yanyingwang

simple_form_for rails单选按钮内嵌

回答

一个简单的办法：

相关问题