如何使用引导程序解决选项选择出现在模态后面？答案

【问题标题】：How to Solve Option Select appeared behind modal using bootstrap?如何使用引导程序解决选项选择出现在模态后面？
【发布时间】：2017-02-09 06:05:28
【问题描述】：

我正在使用引导程序在模态上制作表单，为什么当我使用选择标签时它出现在模型后面？像这样，对不起我的英语不好..

<a href="#regis_card" data-toggle="modal"><i class="icon icon-inbox"></i> <span>Registrasi Card</span></a>

这是模态

<div class="modal fade" id="regis_card" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <form action="?page=card/add" method="POST" class="form-horizontal">
    <div class="modal-header">
        <button data-dismiss="modal" class="close" type="button">×</button>
        <h3>Registrasi Data Card</h3>
    </div>
    <div class="modal-body">
        <div class="widget-content nopadding">

            <div class="control-group">
                <div class="row row-fluid">

                    <label class="control-label">Pemilik :</label>
                    <div class="controls">
                        <select class="span12" name="id_tenant">
                        <?php
                        $query_tenant = mysqli_query($koneksi, "select * from tenant");
                        while ($data_tenant = mysqli_fetch_array($query_tenant)){ ?>
                            <option value="<?php echo $data_tenant['id_tenant'];?>" ><?php echo $data_tenant['nama_lengkap']." - ".$data_tenant['NIT'];?></option>
                        <?php
                        }
                        ?>
                        </select>
                    </div>
                </div>
            </div>

        </div>
    </div>
    <div class="modal-footer">
        <a data-dismiss="modal" class="btn btn-inverse" href="#">Cancel</a> 
        <button class="btn btn-primary" type="submit">Simpan</button>
    </div>
    </form>
</div>

【问题讨论】：

给我们你的代码
你的代码不是模态内容，只是button触发模态
我已经编辑了我的问题.. 谢谢。

标签： html

【解决方案1】：

更改z-index 的选择：

.class-of-select {
    z-index: 1100; // or > 1050
}

因为，默认模式引导程序有z-index: 1050;

注意：z-index 仅适用于定位元素（位置：绝对、位置：相对或位置：固定）。

.class-of-select {
    position:relative; // or absolute/fixed
    z-index: 1100; // or > 1050
}

【讨论】：