将侧边栏上的引导按钮中的右图标对齐

Question

我想在引导按钮中右对齐图标，而该按钮又位于左列的导航栏中。 我在this小提琴中尝试了十几个修改。 也许.btn-group不是个好主意？

我可以在萤火虫中看到另一个.btn-group内的.btn-group使我的主播遵循此规则：

.btn-group-justified > .btn-group .btn {
    width: 100%;
}

但另一方面，一个.btn-group使我的主播更加糟糕，因为他们遵循这个：

.btn-group-justified > .btn, .btn-group-justified > .btn-group {
    display: table-cell;
    float: none;
    width: 1%;
}

此外，<button>内的.navbar表现得非常奇怪！

在jsfiddle中，第一个按钮位于两个.btn-group内，第二个按钮位于一个组类中。 我已经看到了问题的不同解决方案，但导航栏内没有按钮和可折叠面板。

Answer 1

我展示了我的解决方案there。

我只是重新实现了这个问题的旧解决方案（我喜欢把它称为顶栏窗口对齐问题）：

我给了一个外部包装器这个样式：

.sidebar-btn {
   display: table;
   width: 100%;
}

和内部的：

.sidebar-btn > * {
   display: table-cell;
}

现在，你可以通过给出一个特定的宽度来看到第二个<a>被推到右边缘：

.sidebar-btn > *:nth-child(2) {
   width: 14px;
}

无论引导程序如何，此解决方案都能正常运行。 尽管如此，应该进行一些美容修正以简化引导程序的样式，如最终代码所示。