排队在引导BTN-组的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和右边的按钮之一，然后点击检查然后看每个类适用的样式。