如何設置Select2類型的響應X可編輯表單字段以在Bootstrap 3上正常工作

Question

我需要類型為select2且其上方帶有標簽的響應式可編輯表單字段。 這是我使用Bootstrap3，X editable和Select2的嘗試（簡化代碼）：

<form role="form">
    <div class="row">
        <div class="form-group col-sm-4 col-xs-6">
            <label for="gender">Gender</label>
            <a href="#" class="form-control gender" data-type="select2" data-value="M" data-name="gender">Male</a>
        </div>
        <div class="form-group col-sm-4 col-xs-6">
            <label for="gender">Gender2</label>
            <a href="#" class="form-control gender" data-type="select2" data-value="M" data-name="gender">Male</a>
        </div>
    </div>
    <div class="row">
        <div class="form-group col-sm-4 col-xs-6">
            <label for="gender">Gender3</label>
            <a href="#" class="form-control gender" data-type="select2" data-value="M" data-name="gender">Male</a>
        </div>
        <div class="form-group col-sm-4 col-xs-6">
            <label for="gender">Gender4</label>
            <a href="#" class="form-control gender" data-type="select2" data-value="M" data-name="gender">Male</a>
        </div>
        <div class="form-group col-sm-4 col-xs-6">
            <label for="gender">Gender5</label>
            <a href="#" class="form-control gender" data-type="select2" data-value="M" data-name="gender">Male</a>
        </div>
    </div>
</form>

腳本

$(function(){
    $.fn.editable.defaults.mode = 'inline';
    $('#gender').editable({
        showbuttons: false,
        source: [
            {id: 'M', text: 'Male'},
            {id: 'F', text: 'Female'}
        ],
        select2: {
            width: '100%', // THIS DOESN'T WORK AS IT SHOULD
            // hiding search box
            minimumResultsForSearch: -1
        }
    });
});

這是jsfiddle 。

如果單擊可編輯下拉菜單（選擇），則可以看到問題。

我想實現選擇組件的以下行為：

1. 標簽性別下的位置，與顯示大小，是否聚焦無關
2. 大小相同，無論是否聚焦
3. 像聚焦時一樣，對顯示尺寸的變化做出響應

換句話說，我希望焦點選擇組件的行為與未聚焦時的組件相同，並且具有相同的位置，大小和響應能力。 現在，由於添加了css，它的確保持了高度，但是它沒有相同的位置，並且沒有響應，就像沒有聚焦時一樣。

我該如何實現？

Answer 1

編輯

如果您希望小提琴中的選擇具有響應性，則必須刪除form-inline類。 該類專門設計為不遵守典型的表單控件width：100％並使元素彼此“內聯”浮動。

該文檔說select2元素將嘗試在樣式表中使用css，但建議使用內聯樣式，因此這對我有效：

HTML：

<div class="form-group">
    <label for="gender">Gender</label>
    <input type="hidden" id="gender" style="width:100%">
</div>

JS：

$(function(){
  $('#gender').select2({
    placeholder: 'Gender',
    data: [{id: 'M', text: 'Male'},{id: 'F', text: 'Female'}],
    minimumResultsForSearch: -1
  });
});