javascript - Bootstrap 按钮下拉列表 - 创建溢出

Question

我正在尝试在表格的最后一列创建一个“操作”下拉列表，但是当您单击该下拉列表时出现溢出。 (见附件截图)

我的 HTML 结构如下:

<table id="app_progress" class="table table-striped">
                    <thead>
                    <tr>
                        <th>Name</th>
                        <th>In Build</th>
                        <th>Signed off</th>
                        <th>In deployment Apple</th>
                        <th>In deployment Android</th>
                        <th>In review Apple</th>
                        <th>In review Android</th>
                        <th>Live Apple</th>
                        <th>Live Android</th>
                        <th>Paid</th>
                        <th>Actions</th>
                    </tr>
                    </thead>
                    <tbody>
                    <!--for loop here that will create a TR all content in the TD based on whats passed in.-->

                    <tr>
                        <!--td>523</td-->
                        <td><a href="#" class="view-form-a">Primary</a></td>
                        <!-- in_build column -->
                                                    <td><a href="#" class="tick-anchor"><span aria-hidden="true" class="glyphicon glyphicon-remove"></span></a></td>

                        <!-- signed_off column -->
                                                    <td><a href="#" class="tick-anchor"><span aria-hidden="true" class="glyphicon glyphicon-remove"></span></a></td>

                        <!-- in_deployment_apple column -->
                                                    <td><a href="#" class="tick-anchor"><span aria-hidden="true" class="glyphicon glyphicon-remove"></span></a></td>

                        <!-- in_deployment_android column -->
                                                    <td><a href="#" class="tick-anchor"><span aria-hidden="true" class="glyphicon glyphicon-remove"></span></a></td>

                        <!-- in_review_apple column -->
                                                    <td><a href="#" class="tick-anchor"><span aria-hidden="true" class="glyphicon glyphicon-remove"></span></a></td>

                        <!-- in_review_android column -->
                                                    <td><a href="#" class="tick-anchor"><span aria-hidden="true" class="glyphicon glyphicon-remove"></span></a></td>

                        <!-- live_apple column -->
                                                    <td><a href="#" class="tick-anchor"><span aria-hidden="true" class="glyphicon glyphicon-remove"></span></a></td>

                        <!-- live_android column -->
                                                    <td><a href="#" class="tick-anchor"><span aria-hidden="true" class="glyphicon glyphicon-remove"></span></a></td>

                        <!-- paid column -->
                                                                            <td><a href="#" class="tick-anchor"><span aria-hidden="true" class="glyphicon glyphicon-remove"></span></a></td>
                                                                        <!-- view app column -->
                        <td>
                            <div class="btn-group open">
                                <button aria-expanded="true" data-toggle="dropdown" class="btn btn-sm btn-default dropdown-toggle" type="button">
                                    Action <span class="caret"></span>
                                </button>
                                <ul role="menu" class="dropdown-menu">
                                    <li><a href="#">Action</a></li>
                                    <li><a href="#">Another action</a></li>
                                    <li><a href="#">Something else here</a></li>
                                    <li class="divider"></li>
                                    <li><a href="#">Separated link</a></li>
                                </ul>
                            </div>
                        </td>
                    </tr>
                     <!--End of If statement-->

                    <tr>
                        <!--td>99786</td-->
                        <td><a href="#" class="view-form-a">Primary School</a></td>
                        <!-- in_build column -->
                                                    <td><a href="#" class="tick-anchor"><span aria-hidden="true" class="glyphicon glyphicon-remove"></span></a></td>

                        <!-- signed_off column -->
                                                    <td><a href="#" class="tick-anchor"><span aria-hidden="true" class="glyphicon glyphicon-remove"></span></a></td>

                        <!-- in_deployment_apple column -->
                                                    <td><a href="#" class="tick-anchor"><span aria-hidden="true" class="glyphicon glyphicon-remove"></span></a></td>

                        <!-- in_deployment_android column -->
                                                    <td><a href="#" class="tick-anchor"><span aria-hidden="true" class="glyphicon glyphicon-remove"></span></a></td>

                        <!-- in_review_apple column -->
                                                    <td><a href="#" class="tick-anchor"><span aria-hidden="true" class="glyphicon glyphicon-remove"></span></a></td>

                        <!-- in_review_android column -->
                                                    <td><a href="#" class="tick-anchor"><span aria-hidden="true" class="glyphicon glyphicon-remove"></span></a></td>

                        <!-- live_apple column -->
                                                    <td><a href="#" class="tick-anchor"><span aria-hidden="true" class="glyphicon glyphicon-remove"></span></a></td>

                        <!-- live_android column -->
                                                    <td><a href="#" class="tick-anchor"><span aria-hidden="true" class="glyphicon glyphicon-remove"></span></a></td>

                        <!-- paid column -->
                                                                            <td><a href="#" class="tick-anchor"><span aria-hidden="true" class="glyphicon glyphicon-remove"></span></a></td>
                                                                        <!-- view app column -->
                        <td>
                            <div class="btn-group">
                                <button aria-expanded="false" data-toggle="dropdown" class="btn btn-sm btn-default dropdown-toggle" type="button">
                                    Action <span class="caret"></span>
                                </button>
                                <ul role="menu" class="dropdown-menu">
                                    <li><a href="#">Action</a></li>
                                    <li><a href="#">Another action</a></li>
                                    <li><a href="#">Something else here</a></li>
                                    <li class="divider"></li>
                                    <li><a href="#">Separated link</a></li>
                                </ul>
                            </div>
                        </td>
                    </tr>
                     <!--End of If statement-->
                    <!--everything goes within the loop-->
                    </tbody>
                </table>

我怎样才能摆脱溢出？

谢谢

Answer 1

将 dropdown-menu-right 类添加到 ul.dropdown-menu ，它将与按钮的右侧对齐，因此向左扩展。