css - 右键对齐下拉列表中的指针

Question

我正在Creative Tim使用一个Bootstrap仪表板，并试图像在典型的Boostrap中一样向表格单元格添加一个下拉列表：

<div class="btn-group">
    <button type="button" class="btn btn-default btn-xs dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu dropdown-menu-right">
        <li>
            <a href="#">Link1</a>
        </li>
        <li>
            <a href="#">Link2</a>
        </li>
    </ul>
</div>

然而，这个特殊的样式添加了一个指向下拉列表的指针，这个指针既漂亮又美观但是左对齐：

如何转换此指针的样式，使其右对齐？

此行为确实存在样式 - 请参阅页面顶部的下拉列表：

但我无法在导航面板外重现它。

我已经在这里上传了有问题的页面（有很多样式可以上传到JSFiddle）： http://fredapps.s3.amazonaws.com/light-bootstrap-dashboard-pro/examples/tables/regular2.html

Answer 1

他似乎在his live preview上做的方式只是通过CSS。所以，如果我是你，我会看看那里，看看你的不同之处。我的屏幕截图显示了:before伪元素，请务必查看:after。

Answer 2

顶部导航样式会覆盖left和:before的{​​{1}}值。

默认样式如下所示：

:after

用以下内容更新它们：

.dropdown-menu:before {
    border-bottom: 11px solid rgba(0, 0, 0, 0.2);
    border-left: 11px solid transparent;
    border-right: 11px solid transparent;
    content: "";
    display: inline-block;
    position: absolute;
    left: 12px;
    top: -11px;
}

.dropdown-menu:after {
    border-bottom: 11px solid #FFFFFF;
    border-left: 11px solid transparent;
    border-right: 11px solid transparent;
    content: "";
    display: inline-block;
    position: absolute;
    left: 12px;
    top: -10px;
}