css - bootstrap 4 卡页脚显示不正确(使用 flex)

Question

我有这张卡片页脚:

<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 上):

在此先感谢您对我的帮助!

Answer 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>