Как создать столбцы значков и контактную информацию в группе списка Bootstrap?

Question

У меня есть проект, который похож на фрагмент ниже, за исключением того, что он включает в себя значки Material Design, как описано в https://materialdesignicons.com/getting-started.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">      
      
      <p>Contact us and we'll get back to you as soon as possible.</p>
      <ul class="list-group list-group-flush">
        <li class="list-group-item">
          <i class="mdi mdi-map-marker"></i>
          <div>Av. St. Andreu 116, 08392 St. Andreu de Llavaneres, Spain</div>
        </li>
        <li class="list-group-item">
          <i class="mdi mdi-phone"></i>
          +34 937927406
        </li>
        <li class="list-group-item">
          <i class="mdi mdi-email"></i>
          <a href=mailto:ralf@peek.solutions>ralf@peek.solutions</a>
        </li>
      </ul>

С иконками это выглядит так:

Как видите, значок - это просто «часть текста», я полагаю, потому что это встроенный элемент, и размещение текста адреса в div не меняет этого.

Я хотел бы изменить этот вид так, чтобы он больше походил на таблицу, чтобы при переносе адреса на новую строку он выравнивался по левому краю с предыдущей строкой. Тем не менее, я все же хотел бы использовать Bootstrap 4 .list-group-flush для «макета строки».

Как лучше всего подойти к этому? Должен ли я сделать li flex box?

Answer 1

Вы можете сделать это в чистом бутстрапе. Установка отрицательного поля для i - плохая практика. Вместо этого вы должны удалить заполнение элементов li.

 /* You may not need this line if you use material-design-icon */
.fas {
  line-height: 1.5 !important;
}

<link href="https://use.fontawesome.com/releases/v5.0.7/css/all.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-4 mx-auto">
      <ul class="list-group ">
        <li class="list-group-item border-left-0 border-right-0 d-flex pl-0">
          <i class="fas fa-map-marker-alt"></i>
          <span class="pl-3">Av. St. Andreu 116, 08392 St. Andreu de Llavaneres, Spain</span>
        </li>
        <li class="list-group-item border-left-0 border-right-0 d-flex pl-0">
          <i class="fas fa-phone"></i>
          <span class="pl-3">+34 937927406</span>
        </li>
        <li class="list-group-item border-left-0 border-right-0 border-bottom-0 d-flex pl-0">
          <i class="fas fa-envelope"></i>
          <a class="pl-3" href=mailto:ralf@peek.solutions>ralf@peek.solutions</a>
        </li>
      </ul>
    </div>
  </div>
</div>

Answer 2

Мне действительно удалось получить желаемый макет, сделав li гибкой коробкой. Добавление div элементов ко всему тексту,

  <p>Contact us and we'll get back to you as soon as possible.</p>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">
      <i class="mdi mdi-map-marker"></i>
      <div>Av. St. Andreu 116, 08392 St. Andreu de Llavaneres, Spain</div>
    </li>
    <li class="list-group-item">
      <i class="mdi mdi-phone"></i>
      <div>+34 937927406<div>
    </li>
    <li class="list-group-item">
      <i class="mdi mdi-email"></i>
      <div><a href=mailto:ralf@peek.solutions>ralf@peek.solutions</a><div>
    </li>
  </ul>

и добавление следующего CSS,

li.list-group-item {
  display: flex;
}

li.list-group-item i {
  margin-left: -20px;
}

li.list-group-item div {
  margin-left: 10px;
}

делает контактную информацию похожей на: