使用btn-block

Question

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

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

我发现btn-block要使用父元素的整个宽度， 但是如何与Rails表单生成器集成？

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