Question

.panel内的.responsive-table内的表内的.dropdown，正如您在演示中所看到的那样.dropdown被剪切到.panel内部

Bootstrap中的某种z-index或overflow bug我想，如何修复它以便在点击时显示在面板外的下拉列表？

CODE：

<div class="panel panel-default">
    <div class="panel-heading clearfix">
        <h3 class="panel-title pull-left">Panel</h3>
        <div class="pull-right">
            <button class="btn btn-default btn-xs"><span class="glyphicon glyphicon-download-alt"></span></button>
        </div>
    </div>
    <div class="table-responsive">
        <table class="table table-bordered">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Age</th>
                    <th>Location</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>John Smith</td>
                    <td>32</td>
                    <td>
                        <div class="dropdown">
                            <button class="btn btn-default btn-xs btn-block dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                            San Francisco
                                <span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenu1">
                                <li><a href="#">San Francisco</a></li>
                                <li><a href="#">Los Angeles</a></li>
                                <li><a href="#">New York</a></li>
                                <li><a href="#">Dallas</a></li>
                                <li><a href="#">Seattle</a></li>
                                <li><a href="#">Miami</a></li>
                            </ul>
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="panel-footer">
        <button class="btn btn-primary btn-sm">Add Person</button>
    </div>
</div>

Answer 1

添加以下css

.table-responsive {
  overflow-x: visible !important;
  overflow-y: visible !important;
}

Demo

Answer 2

添加

 .bs-example .dropdown{position:fixed}

到你的CSS

Answer 3

.dropdown {position:absolute;}会在<td>之外显示下拉列表（在其上方）

https://jsfiddle.net/nowhqbm1/

Bootstrap Dropdown被裁剪在Panel内

3 个答案: