Question

这一切仍然很新，所以感谢这里的任何帮助。我已经阅读了所有可以找到的主题，但我认为我理解了这个理论，只是在个人环境中找不到错误：

我希望在同一行中有一个评论输入字段和一个帖子按钮。我的div是以下内容：

        <div class="input-group"> 
         <div class="form-inline">
            <%= form_for(@comment, html: { multipart: true }) do |f| %>
             <%= f.text_field :content, placeholder: "Neuen Kommentar abgeben...", class:"form-control" %>
                 <span class='input-group-btn'>
                    <%= f.submit "Posten", class: "btn btn-primary" %>
                </span>
                 <%= hidden_field_tag :parent_id, micropost.id %>
                 <%= hidden_field_tag :car_id, micropost.car_id %>
            <% end %>
            </div>
        </div>

我已经尝试了其他几个我找到的解决方案，但它从未将它们放在同一行。我已经看过我的CSS和更高级别的div，但我似乎无法找到它。任何人都能指出我在正确的方向吗？

祝你好运，彼得

Answer 1

我建议您在表单方面保持超级简单 - 相信我，当您在网站上的多个表单上进行操作时，它们可能会变得更复杂，您不希望被大量代码困住。因此，请保持简单和一致，并提前计划如何构建它们。

要回答您的问题 - 您可以使用Rails Bootstrap form gem（这可以用于您的目的）。它易于使用并生成HTML而无需编码开销。

专门回答你的问题。

将form_for保留在外面。

这里有一个可能对你有用的例子（但我想再次提到宝石）

= form_for @magazine, :html => { :multipart => true } do |f|
  .page-header
    %h3 #{t('magazines.index.header-1')}
  %p #{t('magazines.index.content-1')}
  .col-md-6.col-sm-12.col-xs-12
    %div.input-group
      %span.input-group-addon #{t('magazines.index.title')}
      = f.text_field :title, required: true, :class => "form-control"
 .col-md-6.col-sm-12.col-xs-12
    %div.input-group
      %span.input-group-addon #{t('magazines.index.summary')}
      = f.text_area :summary, :required => true, :rows => '4', :class => "form-control"

这是我们以前的一个项目的简单haml片段，我们打算手动生成表单（因为它只适用于单个表单）。希望这有帮助！

替换＆＃34; .col-md-6.col-sm-12.col-xs-12＆＃34;拥有你需要的空间。这实际上就是你将字段放在一起的方式。

Answer 2

使用标签实现内联表单字段的一种方法是使用引导程序add-on feature

这是附加内联表单字段的样子。

 <div class="form-inline">
    <div class="row">
            <%= simple_form_for(@comment, html: { multipart: true }) do |f| %>
            <div class="input-group input-group-sm">
                <span class="input-group-addon input-group-xs" id="basic-addon1">
                <%= f.button :submit, "Posten", class: "btn btn-sm btn-default" %></span>
                <span class="input-group-addon input-group-xs" id="basic-addon1">
                    <%= f.text_field :content, placeholder: "Neuen Kommentar abgeben...", class: "btn btn-sm btn-default" %></span>

                <span class="input-group-addon input-group-xs" id="basic-addon1">
                    <%= f.input :other_inline_field,  class: 'form-control input-group-xs nudge_down_6', required: false %></span>
            </div>

            <div class="input-group input-group-xs" style="display:block;">
                <small><%= link_to "inline link", somelink_here_path %> | </small>
                <small><%= link_to "inline link2"), other_link_path %> | </small>   
            </div>

        <% end %>

    </div>
</div>

Rails 4，Bootstrap 3，同一行中的form-inline输入组按钮

2 个答案: