在 rails 的引导 btn-group 中排列一个 form_for 按钮

Question

我有一个使用 form_for 创建的按钮

<%= form_for(current_user.likes.build, remote: true) do |f| %>
<div><%= hidden_field_tag :post_id, post.id %></div>
<button type="submit" class="btn btn-secondary">
    <i class="fa fa-heart-o"></i> Like
</button>
<% end %>

我希望它成为引导 btn 组中的按钮之一：

<div class="btn-group" role="group" aria-label="Basic example">
        <%= form_for(current_user.likes.build, remote: true) do |f| %>
        <div><%= hidden_field_tag :post_id, post.id %></div>
        <button type="submit" class="btn btn-secondary">
            <i class="fa fa-heart-o"></i> Like
        </button>
        <% end %>
      <button type="button" class="btn btn-secondary">Middle</button>
      <button type="button" class="btn btn-secondary">Right</button>
    </div>  

问题是它看起来像这样：

而不是像这样直截了当：

我认为<form> 被强制使用它自己的线路。我尝试使用 form_tag 和 button_for，但两者都创建了一个 <form>，最终会遇到同样的问题。我怎样才能获得调用控制器遥控器和传递变量的相同功能但让它正确排列？

这是 HTML 的最终输出：

<div class="btn-group" role="group" aria-label="Basic example">
                <form class="new_like" id="new_like" action="/likes" accept-charset="UTF-8" data-remote="true" method="post"><input name="utf8" type="hidden" value="✓"><input type="hidden" name="authenticity_token" value="tlp7nQs9rmJiZz/OnRQXeYa6sFlZmWKlf4OUwfbI1YALdg==">
                <div><input type="hidden" name="post" id="post_id" value="311"></div>
                <button type="submit" class="btn btn-secondary">
                    <i class="fa fa-heart-o"></i> Like
                </button>
</form>           
  <button type="button" class="btn btn-secondary">Middle</button>
<button type="button" class="btn btn-secondary">Right</button>
</div>

这是一个小提琴：https://jsfiddle.net/2y7zunqg/

Answer 1

如果您的目标只是让它看起来像引导程序中的普通按钮组，您可以执行类似

的操作

.btn-group form{
  float:left; 
  display: inline;// no needed as pointed by Aziz
}

.btn-group form .btn{
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

如果您将每个按钮放在其他表单中，那么您将不得不使用 :first-child 和 :last-child 选择器来使用引导程序使用的相同样式。

我所做的基本上是转到here 并在其中一个按钮上单击“检查”，然后查看每个类应用的样式。