如何在引导列表组中创建图标列和联系信息？

Question

我有一个与以下代码段相似的项目，除了它包含https://materialdesignicons.com/getting-started中所述的Material Design图标。

<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设为灵活框吗？

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

使联系信息如下：

https://docs.npmjs.com/files/package.json