使用 btn-block 使 Bootstrap-Select 按钮变为全宽（响应式）

Question

我正在试验Bootstrap Select Field from silvio moreto，结果发现它使用引导程序btn 和form-control 类。

我的选择字段被响应列 col-md-1 包围。 但是如果内容变得非常大......选择字段宽度超过其周围列的宽度col-md-1，

我发现btn-block使用了父元素的整个宽度， 但是如何与 Rails Form Builder 集成呢？

%div.col-md-1
  = fields_for :user do |f|
    = f.select :interest, options_for_select([
      ["one",{"data-value" => "one", 
              "data-content" => "<i class='fa fa-gift'></i> One"}], 
      ["two",{"data-value" => "two", 
              "data-content" => "<i class='fa fa-question-circle-o'></i> Two"}], 
      ["three",{"data-value" => "three", 
              "data-content" => "<i class='fa fa-soccer-ball-o'></i> Three"}]
      ]), {}, :multiple => "multiple", 
              :title => "Choose what you like", 
              :class => "btn-block selectpicker"

结果

<select multiple="multiple" title="Choose what you like" 
  class="btn-block selectpicker" 
  name="user[interest][]" 
  id="user_interest" 
  style="display: none;">

  <div class="btn-group bootstrap-select show-tick btn-block">
    <button type="button" 
      class="btn dropdown-toggle form-control selectpicker btn-default" 
      data-toggle="dropdown" data-id="searchprofile_interest" 
      title="One, Two, Three">
      <span class="filter-option pull-left">
      <i class="fa fa-gift"></i> One, 
      <i class="fa fa-question-circle-o"></i> Two, 
      <i class="fa fa-soccer-ball-o"></i> Three</span>&nbsp;
      <span class="caret"></span>
    </button>
  </div>

</select>

有没有办法将btn-block 带入按钮？

<button type="button" 
      class="btn dropdown-toggle form-control selectpicker btn-default"

Answer 1

您必须将 btn-block 附加到 data-style，如 here 所示。所以，你的代码是这样的：

%div.col-md-1
  = fields_for :user do |f|
    = f.select :interest, options_for_select([
      ["one",{"data-value" => "one", 
          "data-content" => "<i class='fa fa-gift'></i> One"}], 
      ["two",{"data-value" => "two", 
          "data-content" => "<i class='fa fa-question-circle-o'></i> Two"}], 
      ["three",{"data-value" => "three", 
          "data-content" => "<i class='fa fa-soccer-ball-o'></i> Three"}]
      ]), {}, :multiple => "multiple", 
              :title => "Choose what you like", 
              :class => "selectpicker"
              :"data-style" => "btn-block"