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

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%; 
} 

另外，在.navbar里面的<button>的行为真的很奇怪！

在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; 
} 

该解决方案不管引导程序如何工作。 尽管应该完成一些整容修正来简化引导程序的样式，这可以在最终代码中看到。