Rails 4，Bootstrap 3，同一行中的內嵌輸入組按鈕

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

之一來完成與標籤表單域的內聯的方式是使用引導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> 

Answer 2

我建議你把東西超級簡單，當談到形式 - 相信我，當你在多個表單上的站點沃金，他們可能會變得更加複雜，你不想要被大量的代碼所困住。因此，保持簡單和一致，並計劃好如何構建它們。

要回答你的問題 - 你可以使用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片段生成表單（因爲它僅用於單個表單）。希望這可以幫助！

用您需要的空間替換「.col-md-6.col-sm-12.col-xs-12」。這基本上就是你如何將字段放在一起。