Bootstrap Dropdown 被剪裁在 Panel 内

Question

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

我猜是 Bootstrap 中的某种 z-index 或溢出错误，如何修复它以便单击时下拉菜单显示在面板外部？

演示：http://codepen.io/anon/pen/GJyave

代码：

<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/