bootstrap 4 卡页脚无法正确显示（使用 flex）答案

【问题标题】：boostrap 4 card footer does not display properly (using flex)bootstrap 4 卡页脚无法正确显示（使用 flex）
【发布时间】：2019-08-05 17:39:01
【问题描述】：

我有这张卡片页脚：

<div class="card text-center">
<!-- CODE FOR card-header, card-body -->
    <div class="card-footer">
            <div class="d-flex justify-content-center">

                    <a href="#" class="card-link btn btn-primary btn-sm">
                    <i class="fas fa-briefcase fa-2x"></i>
                    </a>


                    <a href="#" class="card-link btn btn-info btn-sm">
                    <i class="fas fa-comments fa-2x"></i>
                    </a>


                    <a href="#" class="card-link btn btn-success btn-sm">
                    <i class="fas fa-user fa-2x"></i>
                    </a>


                    <a href="#" class="card-link btn btn-warning btn-sm">
                    <i class="fas fa-exclamation-circle fa-2x"></i>
                    </a>

                    <a href="#" class="card-link btn btn-success btn-sm">
                    <i class="fas fa-check fa-2x"></i>
                    </a>
            </div>
    </div>
</div>

问题是它在 iphone 7 上无法正常显示（在其上使用 chrome）。

我在 iphone 上有这个显示：

奇怪的是，它使用“切换设备工具栏”在 chrome 桌面上正确显示（在 iphone 7 上查看卡片的预览，但在桌面 chrome 上）：

但使用相同的工具，它在 iphone 5 上无法正常显示（再次在桌面 chrome 上）：

提前感谢您帮助我！

【问题讨论】：

尝试将position: absolute 添加到您的卡片页脚。
此解决方案不起作用。布局完全坏了

标签： css flexbox bootstrap-4 font-awesome

【解决方案1】：

会有一些命中并尝试使填充正确，但您需要在此处修改左边距：.card-link+.card-link { margin-left: 4% !important;} 在您的 iPhone 上获得最佳效果。

.card-link+.card-link {
  margin-left: 4% !important;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<link rel='stylesheet' href='https://use.fontawesome.com/releases/v5.7.0/css/all.css' integrity='sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ' crossorigin='anonymous'>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>


<div class="container">
  <h2>Card Header and Footer</h2>
  <div class="card text-center">
    <div class="card-header">Demo Header</div>
    <div class="card-body">Demo Content</div>
    <div class="card-footer">
      <div class="d-flex justify-content-center">

        <a href="#" class="card-link btn btn-primary btn-sm">
          <i class="fas fa-briefcase fa-2x"></i>
        </a>


        <a href="#" class="card-link btn btn-info btn-sm">
          <i class="fas fa-comments fa-2x"></i>
        </a>


        <a href="#" class="card-link btn btn-success btn-sm">
          <i class="fas fa-user fa-2x"></i>
        </a>


        <a href="#" class="card-link btn btn-warning btn-sm">
          <i class="fas fa-exclamation-circle fa-2x"></i>
        </a>

        <a href="#" class="card-link btn btn-success btn-sm">
          <i class="fas fa-check fa-2x"></i>
        </a>
      </div>
    </div>
  </div>
</div>

【讨论】：