在rails中的bootstrap 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 %>

我希望它是bootstrap btn-group中的一个按钮：

<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

如果您的目标只是让它看起来像bootstrap中的普通按钮组，那么您可以执行类似

的操作

.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，然后点击其中一个按钮，然后点击Inspect，然后查看每个类适用的风格。