Question

我的HTML是：

<div class="row" style="width: 500px">
    <div class="col-md-1">
        <div class="dropup" style="position: fixed; top: 200px">
            <button class="btn btn-danger dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-expanded="true">
            Dropdown
            <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu2">
                <li><a role="menuitem" href="#">Action</a></li>
                <li><a role="menuitem" href="#">Another lonnnnnnnnnnnnnn action</a></li>
                <li><a role="menuitem" href="#">Something else here</a></li>
                <li><a role="menuitem" href="#">Separated link</a></li>
            </ul>
        </div>
    </div>
    <div class="col-md-11">
        <div class="panel panel-default">
            <div class="panel-body">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci enim architecto debitis saepe veritatis, nesciunt neque dolorem reprehenderit! Officiis, optio. Ipsum quisquam, ut, nemo cupiditate quaerat laudantium nostrum tempore reiciendis! Nisi molestias autem et, aliquid eligendi esse obcaecati aliquam, sed repellat hic qui, consequatur eum explicabo magnam error. Explicabo ex vitae laboriosam dolores molestiae animi, temporibus quam perspiciatis sint ea amet doloremque repudiandae magni placeat porro, delectus laudantium beatae facere, omnis quisquam hic! Eum sed qui laboriosam natus dolorem nam vel deserunt excepturi repellat vero odit sapiente optio fugit ratione, minima sequi facilis numquam, ullam hic quo. Nam, atque, voluptates!</p>
            </div>
        </div>
    </div>
</div>

当我运行它时，下拉菜单位于面板下方。如何修复面板是在下拉按钮和下拉菜单项下？

Answer 1

正如我所说，你必须使用z-index

<div class="row" style="width: 500px">
    <div class="col-md-1">
        <div class="dropup" style="position: fixed; top: 200px; z-index: 9999; //add this z-index">
            <button class="btn btn-danger dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-expanded="true">
            Dropdown
            <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu2">
                <li><a role="menuitem" href="#">Action</a></li>
                <li><a role="menuitem" href="#">Another lonnnnnnnnnnnnnn action</a></li>
                <li><a role="menuitem" href="#">Something else here</a></li>
                <li><a role="menuitem" href="#">Separated link</a></li>
            </ul>
        </div>
    </div>
    <div class="col-md-11">
        <div class="panel panel-default">
            <div class="panel-body">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci enim architecto debitis saepe veritatis, nesciunt neque dolorem reprehenderit! Officiis, optio. Ipsum quisquam, ut, nemo cupiditate quaerat laudantium nostrum tempore reiciendis! Nisi molestias autem et, aliquid eligendi esse obcaecati aliquam, sed repellat hic qui, consequatur eum explicabo magnam error. Explicabo ex vitae laboriosam dolores molestiae animi, temporibus quam perspiciatis sint ea amet doloremque repudiandae magni placeat porro, delectus laudantium beatae facere, omnis quisquam hic! Eum sed qui laboriosam natus dolorem nam vel deserunt excepturi repellat vero odit sapiente optio fugit ratione, minima sequi facilis numquam, ullam hic quo. Nam, atque, voluptates!</p>
            </div>
        </div>
    </div>
</div>

何处更改

<div class="dropup" style="position: fixed; top: 200px; z-index: 9999;">

<强> DEMO HERE

下拉列表在bootstrap 3中

1 个答案: