select2 和 bootstrap 文本字段在 rails 表单中不对齐答案

【问题标题】：select2 and bootstrap text field not align in rails formselect2 和 bootstrap 文本字段在 rails 表单中不对齐
【发布时间】：2014-04-22 15:40:05
【问题描述】：

如下图所示，文本字段（使用引导程序）未与 select2 下拉列表框水平对齐。我怎样才能使它对齐？

以下是_form.html.erb代码sn-p。完整的代码可以在这里找到https://gist.github.com/axilaris/9597320

有 2 个输入未对齐和

<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>

【问题讨论】：

标签： jquery ruby-on-rails twitter-bootstrap alignment jquery-select2

【解决方案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"}) %>

documentation

编辑：使用数据实时搜索

<%= 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 属性。请注意，下划线 (_) 将变为 -。

Documentation about the tags and data attributes.

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>

希望对您有所帮助。

【讨论】：

如果是这种情况，有没有办法在 rails 中做 data-live-search="true" ？至少它与 select2 具有相似的功能，然后可能会对齐。最好不要触摸或添加额外的 CSS。我不想让这个例子复杂化。谢谢。找到这个链接silviomoreto.github.io/bootstrap-select
我试过这样的方法它没有用 "selectpicker", "data-live-search" =>"true"} ) %>
您可以使用不显眼的 javascript 方法并使用散列传递数据属性，这里是文档，我正在更新我的答案。文档：api.rubyonrails.org/classes/ActionView/Helpers/…
我正在查看您提供的链接，看来您可以使用它来替换 select2。我会尝试使用简单的 select_tag。
我尝试将 bootstrap-select.js 和 bootstrap-select.css 添加到 vendor/assets/javascript 和样式表文件夹中。并添加了 application.js 和 application.css 以要求 bootstrap-select。只是复制并粘贴示例代码没有帮助。一旦脚本初始化它就应该启用它。 $('select').selectpicker(); --- 也许你可以告诉我你是如何对齐 bootstrap 和 select2 的，你是如何在代码中添加额外的样式的？