將側邊欄上的引導按鈕中的右側圖標對齊

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

該解決方案不管引導程序如何工作。 儘管應該完成一些整容修正來簡化引導程序的樣式，這可以在最終代碼中看到。