select2和bootstrap文本字段不在rails形式中對齊

Question

如下圖所示，文本字段（使用引導程序）未與select2下拉列表框水平對齊。 我如何使其對齊？

以下是_form.html.erb代碼段。 完整的代碼可以在這里找到https://gist.github.com/axilaris/9597320

有2個輸入未對齊<％= f.text_field：name％>和<％= select_tag（：option，..

<script>

    $(document).ready(function() {
     $('select#option').select2();
    });

</script>
 <br><br>
 <div class="field">
 <%= f.label :name %><br>
 <%= f.text_field :name %>
 <%= select_tag(:option, 
    options_for_select([['All', 1], ['Co', 2], ['Bought', 3]] )) %>
 </div>

Answer 1

我還在幾個項目中使用select2和Bootstrap。 Select2具有自己的樣式，並在引導后應用。 我認為您必須使用一些CSS邊距，填充等。您可以為select_tag提供特定的類，以獲得更好的定位：

<%= select_tag(:option, options_for_select([['All', 1], ['Co', 2], ['Bought', 3]] ), {class: "my-specific-class-for-select2"}) %>

文件

編輯：數據實時搜索

<%= select_tag(:option, options_for_select([['All', 1], ['Co', 2], ['Bought', 3]] ), {class: "my-specific-class-for-select2", data:{live_search: "true"}) %>

標簽將獲得data-live-search屬性。 請注意，下划線（_）將變為-。

有關標簽和數據屬性的文檔。

EDIT2：

通過對html和CSS進行一些調整，我可以正常工作：

application.scss

/*Solution for bootsrap styling compliance*/
a.select2-choice{
  height: 35px !important;
  span{
   padding-top: 4px;
  }
}



In the view

<div class="form-group clearfix">
  <%= f.label :title %><br>
  <div class="col-sm-4"><%= f.text_field :title,  {class: "form-control"} %></div>
  <div class="col-sm-3"><%= select_tag(:type,
  options_for_select([['All', 1], ['Co', 2], ['Bought', 3], ['View', 4], ['Top API', 5]] ), {style: "width:100%;"}) %></div>
</div>


<div class="actions clearfix">
  <%= f.submit :class => "btn btn-primary" %>
</div>

希望能幫助到你。