Неожиданное поведение значков внутри компонента свертывания Bootstrap4 - не удается отобразить значки по горизонтали - PullRequest
Новая
       30

Неожиданное поведение значков внутри компонента свертывания Bootstrap4 - не удается отобразить значки по горизонтали

0 голосов
/ 23 мая 2018

Я пытаюсь отобразить 3 иконки по горизонтали внутри коллапса Bootstrap4.Я добавил значки (теги i) на карту, но они отображаются вертикально.По какой-то причине элемент i занимает всю строку.Вот пример Jsfiddle: https://jsfiddle.net/benCarp/Lz40t409/

Я попытался изменить свойства CSS, в том числе: 

display: inline; 
width: 20px

Я также попытался изменить родительский div на display: flex.Все это не помогло.Любые предложения о том, как я могу этого добиться?

Ответы [ 2 ]

0 голосов
/ 23 мая 2018

По умолчанию Bootstrap 4 card-body равен flex-direction:column.Вы можете изменить его на flex-direction:row, используя flex-row класс ...

https://www.codeply.com/go/52ynXc916o

<div class="card card-body flex-row">
    <i class="fa fa-facebook-f"></i>
    <i class="fa fa-whatsapp"></i>
    <i class="fa fa-envelope"></i>
</div>

Или вы можете сделать тело карты display:block вместо display:flex: 

<div class="card card-body d-block">
    <i class="fa fa-facebook-f"></i>
    <i class="fa fa-whatsapp"></i>
    <i class="fa fa-envelope"></i>
</div>

Также в качестве примечания, глобальное изменение отступа .col до 10px будет иметь отрицательные последствия для выравнивания сетки.

0 голосов
/ 23 мая 2018

Необходимо перезаписать дисплей, чтобы карта была блокированной 

.card{
  display: block;
}

или 

<div class="card card-body d-block">
  <i class="fa fa-facebook-f"></i>
  <i class="fa fa-whatsapp"></i>
  <i class="fa fa-envelope"></i>
</div>
...