Question

我希望能够将td用作btn-group，使用自定义类但无法正常工作

标记

<td class="actions">
    <a href="/foo/bar" class="btn"><span class="fa fa-edit fa-lg "></span> Edit</a>
    <a href="#" data-toggle="dropdown" class="btn btn-default dropdown-toggle"><span class="fa fa-caret-down fa-lg "></span></a>
    <ul class="dropdown-menu">
        <li><a href="/foo/bar"><span class="fa fa-times fa-lg "></span> Delete</a></li>
        <li><a href="/foo/bar"><span class="fa fa-times fa-lg "></span> Delete</a></li>
        <li><a href="/foo/bar"><span class="fa fa-times fa-lg "></span> Delete</a></li>
    </ul>
</td>

少

td {
    &.actions {
        > a {
            .pull-left;
            .button-size(@padding-xs-vertical; @padding-xs-horizontal; @font-size-small; @line-height-small; @border-radius-small);
            &:first-child {
                .button-variant(@btn-default-color; @btn-default-bg; @btn-default-border);
            }
        }
    }
}

我尝试了一些诸如&.actions:extend(:btn-group)

之类的事情

但是切换不显示UL并且它不会创建按钮组（例如：按钮一直有圆角）

将btn-group类添加到td，一切正常。

Answer 1

根据上述评论汇总答案。在这种情况下，应使用extend all .btn-group，因为td { &.actions:extend(.btn-group all) { // ... } }不仅仅是单个＆＃34; flat＆＃34;样式，但是一组具有相当复杂的嵌套层次结构的选择器/规则集，所以：

td {
    &.actions {
        &:extend(.btn-group all);
        // ...
    }
}

虽然因为#2206 bug而将其编写为：

可能更安全

{{1}}

td上的自定义btn-group类少了

标记

少

1 个答案: