Выровнять значки справа в кнопках начальной загрузки на боковой панели

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 s, вторая - внутри одного группового класса. Я видел различные решения проблемы, но не с кнопками и разборными панелями внутри навигационной панели.

Answer 1

Я демонстрирую свое решение there.

я просто повторно реализовать старое решение этой проблемы (я называю это топ-бар проблема выравнивания окна):

Я дал внешней обертки это стили:

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

и к внутренней один:

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

Теперь вы можете увидеть второй <a> для толкания на правом краю, давая определенную ширину:

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

Это решение работает независимо от бутстрапа. Некоторые косметические исправления, однако, должны быть сделаны, чтобы облегчить стилизацию бутстрапа, как видно из окончательного кода.