使Bootstrap-選擇按鈕走全寬（響應）與btn塊

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