Rails 4，Bootstrap 3，form-inline input-group按钮在同一行 [英] Rails 4, Bootstrap 3, form-inline input-group button in same row

问题描述

仍然相当新的所有这一切，所以感谢任何帮助在这里。我已经阅读所有的线程，我可以找到，但我想我理解的理论，只是不能在我个人的设置找到错误：

我想有一个注释输入字段以及同一行中的post按钮。
我的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.submitPosten，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，但我似乎找不到它。任何人都可以在这里指向正确的方向？

最好的问候，
彼得

解决方案

使用标签完成表单字段内联的一种方法是使用引导

 < 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-xsid =basic-addon1> 
<％= f.button：submit，Posten，class：btn btn-sm btn-default％>< / span> 
< span class =input-group-addon input-group-xsid =basic-addon1> 
<％= f.text_field：content，placeholder：Neuen Kommentar abgeben ...，class：btn btn-sm btn-default％>< / span> 
 
< span class =input-group-addon input-group-xsid =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-xsstyle =display：block;> 
< small><％= link_toinline link，somelink_here_path％> | < / small> 
< small><％= link_toinline link2），other_link_path％> | < / small> 
< / div> 
 
<％end％> 
 
< / div> 
< / div> 
  

still pretty new to all this, so thanks for any help here. I have read all the threads I could find but I think I understood the theory, just cant find the mistake in my individual setting:

I want to have a comment input field together with a post button in the same line. My div is the following:

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

I have tried several other solutions that I have found, but it never puts them in the same row. I have already looked at my CSS and the divs on higher levels, but I cant seem to find it. Can anyone point me in the right direction here?

Best regards, Peter

解决方案

One way to accomplish inlining of form fields with the label is to use the bootstrap add-on feature

This is what the add-on inline form field looks like.

 <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 input-group按钮在同一行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！