Нижний колонтитул карты Boostrap 4 отображается неправильно (используется flex) - PullRequest
Новая
       15

Нижний колонтитул карты Boostrap 4 отображается неправильно (используется flex)

0 голосов
/ 14 марта 2019

У меня есть этот колонтитул: 

<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 (с использованием хрома на нем).

У меня есть этот дисплей на iphone:

enter image description here

Что странно, так это то, что он правильно отображается на рабочем столе Chrome с помощью «панели инструментов переключения устройств» (чтобы просмотреть предварительный просмотр карты на iphone 7, но на Chrome на рабочем столе):

enter image description here

Но при использовании того же инструмента он не отображается должным образом на iphone 5 (снова на настольном Chrome):

enter image description here

Заранее спасибо за помощь!

1 Ответ

1 голос
/ 17 марта 2019

Будет некоторое попадание и попытка получить правильный отступ, но вам нужно будет повозиться с левым полем здесь: .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>
...