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>

希望能帮助到你。