Question

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

所以，我在表格中有这两个下拉链接：

enter image description here

每当您点击向下箭头时，都会出现一个下拉列表。问题是，下拉框始终位于第一个箭头下方，如下所示：

enter image description here

如果您点击第二行中的箭头，下拉列表仍然会显示在上图中（在第一行的箭头下方）。

这是我的下拉列表代码:(该表包含类.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;
}

如何实施它以便每个下拉列表位于每个箭头下？

编辑：BOOTPLY：http://www.bootply.com/QNV6nCrk9v

Answer 1

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

.open {
    position: relative;
}

由于您的.ref-moreinfo位于绝对位置，因此需要放置一个框架，您可以通过为.open元素指定位置来执行此操作。点击后，查看here如何以不同方式定位。我希望它可以帮助你纠正你的项目。

此外，我注意到您有另一个无效标记，.ref-moreinfo容器中的元素需要在li范围内，因为您的.ref-moreinfo是ul。< / p>

CSS - Bootstrap下拉列表，具有相同的类，位于不同的链接下

1 个答案: