html - CSS - Bootstrap 下拉菜单，具有相同的类，位于不同的链接下

Question

我的 Bootstrap 下拉类的位置有问题。

所以，我的表格中有这两个下 zipper 接:

只要您点击向下箭头，就会出现一个下拉菜单。问题是，下拉框始终位于第一个箭头下方，如下所示:

如果您点击第二行的箭头，下拉菜单将仍然如上图所示(在第一行的箭头下方)。

这是我的下拉代码:(该表具有类 .referral-table)

<table class="referral-table">  
<thead>
    <th width="4%" class="text-center">#</th>
    <th width="25%">Referral ID</th>
    <th width="20%">Referral Since</th>
    <th width="5%">Clicks</th>
    <th width="9%">Last Click</th>
    <th width="8%">AVG</th>
    <th width="10%"></th>
</thead>
<tbody>
<tr>
                        <td class="text-center">1</td>
                        <td>R1241415121151</td>
                        <td>Today</td>
                        <td class="text-center">3</td>
                        <td>Today</td>
                        <td>-,--</td>
                        <td>
                        <a href="#" style="color: #00975b;" class="dropdown-toggle  float-right" data-toggle="dropdown"><i class="fa fa-angle-double-down"></i> </a>
                        <ul class="dropdown-menu ref-moreinfo">
                            <div class="title">R1241415121151 - INFO</div>
                            <table>
                                <tr>
                                    <td>Status</td>
                                    <td><i class="fa fa-check-circle-o" title="Your referral is active."></i></td>
                                </tr>
                                <tr>
                                    <td>Came From</td>
                                    <td><i class="fa fa-question" title="http://google.com/images/wwwwwhaat"></i></td>
                                </tr>
                                <tr>
                                    <td>Earned</td>
                                    <td>$5.025</td>
                                </tr>
                            </table>
                        </ul>

                        </td>
                    </tr>
                    <tr>
                        <td class="text-center">1</td>
                        <td>R1241415121151</td>
                        <td>Today</td>
                        <td class="text-center">3</td>
                        <td>Today</td>
                        <td>-,--</td>
                        <td>
                        <a href="#" style="color: #00975b;" class="dropdown-toggle  float-right" data-toggle="dropdown"><i class="fa fa-angle-double-down"></i> </a>
                        <ul class="dropdown-menu ref-moreinfo">
                            <div class="title">R1241415121151 - INFO</div>
                            <table>
                                <tr>
                                    <td>Status</td>
                                    <td><i class="fa fa-check-circle-o" title="Your referral is active."></i></td>
                                </tr>
                                <tr>
                                    <td>Came From</td>
                                    <td><i class="fa fa-question" title="http://google.com/images/wwwwwhaat"></i></td>
                                </tr>
                                <tr>
                                    <td>Earned</td>
                                    <td>$5.025</td>
                                </tr>
                            </table>
                        </ul>
                        </td>
                    </tr>

                </tbody>

            </table>

这是 CSS:

.referral-table .open>.dropdown-toggle{
    background-color: #fff;

    border: 1px solid rgba(0, 0, 0, 0.15);
    border-width: 1px !important;
    border-radius: 4px !important;

    padding-left: 5px;
    padding-right: 5px;
    border-bottom: 0px;
    z-index: 9;
    position: absolute;
    top: 45px;
    right: 41px;

}
.ref-moreinfo {
    position: absolute;
    float: left;
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-width: 1px !important;
    border-radius: 4px !important;
    -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.175) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.175) !important;
    margin-top: -5px;
    margin-top: 10px;
    left: 607px;
    top: 51px;
    z-index: 8;
    padding-left: 10px;
        padding-right: 10px;
    font-size: 11px;
}

我如何实现它以便每个下拉菜单都位于每个箭头下方？

编辑: Bootstrap :http://www.bootply.com/QNV6nCrk9v

Answer 1

不幸的是，您提供的 bootply 与您提供的屏幕截图并不完全匹配，但在查看您的代码后，我认为起点是为您的 .open 元素提供 position: relative 。

.open {
    position: relative;
}

由于您的 .ref-moreinfo 是绝对定位的，因此需要放置一个框架，您可以通过给 .open 元素指定位置来实现。参见 here单击时它现在的位置如何不同。我希望它能帮助你纠正你的元素。

此外，我注意到您还有另一个无效标记，.ref-moreinfo 容器中的元素需要位于 li 中，因为您的 .ref -moreinfo 是一个 ul。