Блог

Главная - Вопросы по программированию - нижний колонтитул boostrap 4 не отображается должным образом (с использованием flex)

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

#css #flexbox #bootstrap-4 #font-awesome

#css #flexbox #bootstrap-4 #шрифт-потрясающий

Вопрос:

У меня есть этот нижний колонтитул карты :

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

введите описание изображения здесь

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

Комментарии:

1. Попробуйте добавить position: absolute в свой нижний колонтитул карты.

2. это решение не работает. макет полностью нарушен

Ответ №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>