Bootstrap. Как сделать сложный li элемент

Хочу сделать список ссылок, чтобы в некоторых строчках списка была одна или несколько ссылок.
Допустим у меня есть ссылка1 без ссылки на гитхаб, а вторая строка списка имеет ссылку на скачивание плюс ссылку на исходники на гитхабе. И чтобы у обеих ссылок ширина блока одинаковая была
Как мне сделать класс github чтобы я мог легко добавлять его к другим ссылкам.
Пробовал вот так:
HTML:

• Foo binary link

CSS:
.github { background: url('../images/github.svg') no-repeat; background-size: contain; padding: 3% 3% 3% auto; }
.example_view li { padding: 3% 2%; margin: 0 0 3px 0; background: #ddbdff; font-size: 2vmin; }
Но высота гихабовского col'а становится равной 0.989583px
Может есть способ проще и изысканней? Хардкод не нужен

Ответ

Да, способ лаконичнее - есть. Ссылку-иконку, если она есть - добавляем в li > .pull-right > a, а основную ссылку располагаем традиционно в li > a

• Foo binary link

Я использовал бутстраповский класс .list-unstyled для генерации списка без маркеров и паддинга слева. И стилизовал li элементы этого списка, как было у вас с .example_view li
.list-unstyled > li { background: #ddbdff; font-size: 2vmin; line-height: 4vmin; margin: 0 0 3px 0; padding: 3% 2%; }
.pull-right - тоже класс бутстрапа, он применяет к блоку атрибут float: right, в итоге блок располагается в крайней правой части контейнера, в нашем случае - в крайней правой части li. А основная ссылка будет занимать всю доступную ей ширину, слишком длинная ссылка перенесется на следующую строку:
Ссылок-иконок внутри блока .pull-right вы можете разместить сколько угодно - они будут располагаться в крайней правой части li в один ряд с небольшим отступом друг от друга.

Foo binary link

За отступы между иконками отвечают стили:
.icon + .icon { margin-left: 4px; }
В примере выше также видно разные классы у ссылок иконок - .icon-github и .icon-gitlab. Меняя эти классы у ссылок-иконок - вы можете использовать разные изображения. Единственное условие - изображения должны быть квадратными, чтобы не было нарушения пропорций. Если ваша иконка прямоугольная - просто впишите ее в квадратный холст и сохраните в таком виде.
За это отвечают эти стили:
.icon { background-size: cover; display: inline-block; height: 4vmin; width: 4vmin; } .icon-github { background-image: url('https://upload.wikimedia.org/wikipedia/commons/9/91/Octicons-mark-github.svg'); } .icon-gitlab { background-image: url('https://upload.wikimedia.org/wikipedia/commons/1/18/GitLab_Logo.svg'); }
Обратите внимание на высоту и ширину иконок - они равны интерлиньяжу основной ссылки (4vmin). Это помогает выровнять ссылки-иконки по высоте вместе с текстом (хотя это и не единственный способ добиться этого).
Также background-size: contain здесь можно уже не использовать, подойдет и cover
Если что нужно поправить - отпишите в комментарии. Рабочий пример: https://jsfiddle.net/gambala/Lnr4a4wp/