Question

我正在使用Angular 6和Bootstrap（并且仍在学习Angular）。我有一个包含多个标签的标签集，最后一个标签需要右对齐。

在Vanilla Bootstrap中，我可以将类ml-auto添加到最后一个选项卡中，以使其向右对齐。此类仅可以归结为margin-left: auto !important;，因此，如果可以确定相关元素，则从理论上讲，我应该可以对此进行样式设置。

<li class="nav-item ml-auto">
    <a class="nav-link" role="tab">My Right Tab</a>
</li>

但是Angular代码更不透明：

<ngb-tab>
    <ng-template ngbTabTitle>My Right Tab</ng-template>
    <ng-template ngbTabContent>
        ...
    </ng-template>
 </ngb-tab>

并在编译时构建所有相关的Bootstrapified HTML。

<ngb-tab>位成为HTML中的<a>标记，而不是<li>，因此我无法将id或类应用于要从中挂钩相关样式的ID或类（并且CSS中没有父选择器。

这是一个复杂的附加嵌套选项卡集，在各个选项卡的选项卡内容中具有不同的样式。我通过在包装了标签集的div上的类进行了隔离。但是我不能使用外部选项卡做同样的事情。因此，我可以通过在:last-of-type上使用.nav-item来在标签上设置左页边距，然后在嵌套的标签集中覆盖左页边距，但这听起来像是很多杂技难以实现的事情，这些事情应该变得非常简单

有没有更简单，更清晰，更棱角分明的方法来做到这一点？有没有办法应用引导类？我可以只在选项卡集中编写bootstrap html吗（因为它似乎是不成角度的，所以我没有尝试过）？

如何实现Angular 6+ Bootstrap选项卡右对齐选项卡？

0 个答案: