Jquery 如何设置Select2类型的响应X可编辑表单字段以在Bootstrap 3上正常工作

我需要select2类型的响应可编辑表单字段，上面有标签。下面是我尝试使用Bootstrap3、X可编辑并选择2的简化代码：

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

这是

如果单击“可编辑”下拉列表“选择”，则可以看到该问题

我希望实现select组件的以下行为：

无论显示大小和是否聚焦，标签下的位置都是性别 大小相同，无论是否聚焦 对焦时响应显示器大小的变化，就像不对焦时一样 换句话说，我希望聚焦选择组件的行为与未聚焦时相同，具有相同的位置、大小和响应能力。现在，由于添加了css，它确实保持了高度，但是它没有相同的位置，而且它没有响应，就像它没有聚焦一样

我如何才能做到这一点？

编辑

如果您想让小提琴中的select做出响应，那么必须删除forminline类。该类是专门设计的，不支持典型的表单控件宽度：100%，并允许元素在内联中相邻浮动

doc说select2元素将尝试在样式表中使用css，但建议使用内联样式，所以这对我来说是可行的：

HTML:

---

谢谢jme11的回答。根据您的评论，我在我的问题中更新了代码和JSFIDLE：删除了min-width-1，替换了与row类内联的表单。我只需要让select2拥有其容器的100%宽度，但我还无法实现它。宽度：在select2容器中为100%。select2选项不起作用？select2本身有一个设置宽度的选项。设置宽度：当您调用select2.tnx Ravimallya以获取您的评论时，“100%”。我已经更新了我的帖子，在初始化select2时对设置宽度进行了评论。由于某些原因，它不能正常工作。现在我明白你在单击下拉菜单时的意思了。我一定做了其他的编辑，因为我昨天没有看到这种行为。医生说你需要内联样式。我可以让它表现出来，但只有通过我对原始答案所做的编辑。

$(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
        }
    });
});

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

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