Twitter bootstrap 选择的插件在引导模式下显示不正常

我的问题是在引导模式上使用所选的显示出现问题，有人知道这是什么问题吗

这是截图

****这是我的代码，我使用Codeigniter和引导框架****

<div aria-hidden="true" aria-labelledby="myModalLabel" role="dialog" tabindex="-1" class="modal hide fade" id="add_form">
    <div class="modal-header"  style="cursor:move">
        <button aria-hidden="true" data-dismiss="modal" class="close" type="button">×</button>
        <h3 id="myModalLabel" title="drag me around">Add Skill <i class="icon-move" style="margin-top:10px;"></i></h3>
    </div>
    <?php echo form_open('skill/add_skill'); ?>
    <div class="modal-body" style="min-height:400px;">
        <div class="form-horizontal">
            <div class="control-group">
                <div class="control">
                    <label for="control-label" class="control-label"></label>
                    <code>Note :</code> All field mark with <code>*</code> are required.
                </div>
            </div><!-- /control-group -->

            <div class="control-group template">
                <label for="input01" class="control-label">Tenant*:</label>
                <div class="controls">
                    <select name="tenant"  data-placeholder="Select Tenant" class="chzn_a span7 ">
                        <option value=""></option>
                        <?php if(isset($tenant_records)) : foreach($tenant_records as $row) : ?>
                        <option value="<?php echo $row->tenantid; ?>" data-id="<?php echo $row->tenantid; ?>"><?php echo $row->name; ?></option>
                        <?php endforeach; ?>
                        <?php endif; ?>
                    </select>
                </div>
            </div>

            <div class="control-group  template">
                <label for="input01" class="control-label">Skill*:</label>
                <div class="controls">
                    <input id="title" name="skill" size="30" type="text"    value="<?php echo set_value('skill'); ?>" placeholder="Skill"  title="Eg: Skill"  />
                </div>
            </div>

            <div class="control-group  template">
                <label for="input01" class="control-label">Description*:</label>
                <div class="controls">
                    <input id="title" name="description" size="30" type="text"    value="<?php echo set_value('description'); ?>" placeholder="Description"  title="Eg: Description"  />
                </div>
            </div>
        </div>
    </div>
    <div class="modal-footer">
        <input type="hidden" name="module_index" id="module_index" value="<?php echo site_url('skill/index/'); ?>" />
        <button data-dismiss="modal" class="btn">Close</button>
        <button class="btn btn-primary" type="submit">Save changes</button>
        </form>
    </div>
</div>

这是我选择的

---

这是一个

CSS

冲突，可能是在将class

span7

添加到您的

select

后发生的

<select name="tenant" data-placeholder="Select Tenant" class="chzn_a span7" style="width: 200px;">

尝试将

宽度

作为内联样式应用于

选择

<select name="tenant" data-placeholder="Select Tenant" class="chzn_a span7" style="width: 200px;">

当我使用所选插件时，我使用类作为

chznselect

，但您使用了

chzna

---

例如：检查此项。

在显示模式后应用所选选项

    $('#modal').on('shown.bs.modal', function () {
        $('.chzn-select', this).chosen();
    });

添加这个css

.chosen-container{
  width: 100% !important;
}

---

所以我假设问题是输入宽度？尝试使用Chrome Inspect元素或类似元素来分析应用于输入的CSS抱歉，虽然我已经设置了宽度，但仍然是相同的。您是如何设置宽度的？我认为存在一些相互冲突的样式，这就是为什么使用Chrome Inspect Element这样的工具将有助于检查实际应用了哪些样式以及哪些样式正在被覆盖。我很晚才回复，css确实存在冲突，现在我可以使用了，谢谢bro@Oscar不客气。很高兴知道您成功了：）感谢您提供的这段代码片段，它可能会提供一些即时帮助。通过说明为什么这是一个很好的解决问题的方法，正确地解释它的教育价值，并将使它对未来有类似但不完全相同问题的读者更有用。请在回答中添加解释，并说明适用的限制和假设。“显示”和“显示”是不同的。我错误地输入了“show”而不是“show”。