排隊在引導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和右邊的按鈕之一，然後點擊檢查然後看每個類適用的樣式。