bootstrsap模态中的引导选择

Question

我正在模式中使用Bootstrap-select下拉列表，我希望模式可以调整大小，以便在展开时完全可见下拉列表。有办法吗？

这是我的代码：

    <link rel="stylesheet"
    href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link
    href="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-multiselect-widget/1.17/jquery.multiselect.filter.css"
    rel="stylesheet" />
<link rel="stylesheet"
    href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-select.min.css">
<script src="https://code.jquery.com/jquery-3.4.1.min.js"
    integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
    crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"
    integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU="
    crossorigin="anonymous"></script>
<script type="text/javascript" src="https://unpkg.com/[email protected]/dist/umd/popper.min.js"></script>
<script
    src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<script
    src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap-select.min.js"></script>
<script src="https://use.fontawesome.com/b75cc9b39e.js"></script>
<script src="https://kit.fontawesome.com/2bc6529db2.js"></script>





    <button type="button" class="btn btn-primary" data-toggle="modal"
        data-target="#exampleModal">Launch demo modal</button>


    <div class="modal fade bd-example-modal-lg" id="exampleModal"
        tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
        aria-hidden="true">
        <div
            class="modal-dialog modal-xl modal-dialog-scrollable  modal-dialog-centered"
            role="document">
            <div class="modal-content">
                <div class="modal-body" style="overflow: hidden">


                    <form class="form-horizontal registerForm" method="post"
                        id="productForm">


                        <div class="container-fluid">

                            <div class="row">
                                <div class='col-sm-3 text-right' style='height: 40px'>
                                    <span class="align-bottom"
                                        style="line-height: 40px; vertical-align: middle"><b>Field</b></span>
                                </div>
                                <div class="col-sm-7">
                                    <div class="dropdown bootstrap-select dropdown w-100">
                                        <select class="selectpicker" id="Field" name="Field"
                                            data-width="100%">
                                            <option value="">Select a Field</option>
                                            <option data-icon="fas fa-font" value='1'>1</option>
                                            <option data-icon="fas fa-font" value='2'>2</option>
                                            <option data-icon="fas fa-font" value='3'>3</option>
                                            <option data-icon="fas fa-font" value='4'>4</option>
                                            <option data-icon="fas fa-font" value='5'>5</option>

                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <button type="button" class="btn btn-secondary pull-right" onclick="CloseModal()">Close</button>
                        <input type="submit" class="btn btn-success pull-right" name="send" value="Send" />
                    </form>
                </div>
            </div>
        </div>
    </div>

如上所述，当我展开下拉菜单时，模态的尺寸不变，下拉菜单改变位置，相反，我希望模态改变尺寸，而下拉菜单不改变位置。

Answer 1

您必须在此块中替换.col-*类

<div class='col-sm-3 text-right' style='height: 40px'>
    <span class="align-bottom" style="line-height: 40px; vertical-align: middle"><b>Field</b></span>
</div>

<div class="col-sm-7">
    <div class="dropdown bootstrap-select dropdown w-100">
        <select class="selectpicker" id="Field" name="Field" data-width="100%">
            <option value="">Select a Field</option>
            <option data-icon="fas fa-font" value='1'>1</option>
            <option data-icon="fas fa-font" value='2'>2</option>
            <option data-icon="fas fa-font" value='3'>3</option>
            <option data-icon="fas fa-font" value='4'>4</option>
            <option data-icon="fas fa-font" value='5'>5</option>
        </select>
    </div>
</div>

您可以设置

<div class='col-auto text-right' style='height: 40px'>
    ........
</div>

使用col-auto，元素将仅占用所需的空间。

和

<div class="col">
    <div class="dropdown bootstrap-select dropdown w-100">
     ...........
    </div>
</div>

使用col，元素将占用剩余空间。

关于模式调整大小，由于具有绝对位置，因此未显示该下拉列表。

如果您知道项目的数量，可以像这样设置模式内容的最小高度：

.modal-content {
    min-height: 300px;
}

如果要在下拉菜单打开时展开整个模态，则应像这样更改下拉菜单的位置：

.bootstrap-select .dropdown-menu {
    position: relative!important;
    margin-top: -30px;
}