bootstrap и проблема Safari (Ipad) с двумя строками внутри родительской строки и двумя столбцами - PullRequest
Новая
       19

bootstrap и проблема Safari (Ipad) с двумя строками внутри родительской строки и двумя столбцами

0 голосов
/ 22 февраля 2020

У меня есть эта простая страница, и она работает, как и ожидалось, с chrome, firefox и edge. Я также проверил это с моим Iphone и телефоном Asus. У меня проблема с Safari на iPad (версия 10.3.3). По какой-то неизвестной причине (по крайней мере, для меня) это не работает ..

это страница, на которой вы можете увидеть страницу, которую я создаю:

http://www.palombodavide.it/tempo6/

это код: 

<div class="container-fluid bg-color">

    <div class="row">

      <div class="col px-0">
        <img class="img-fluid w-100 img-top" src="img/home.jpg" alt="Tappezzeria Tempo">
      </div> <!-- end col-lg -->

    </div> <!-- end row-->

    <div class="row">

      <div class="col px-0">
        <div class="p-5">
          <h2 class="display-4 text-center text-color" id="chisiamo">Text</h2>
          <h3 class="text-center text-color-2">text</h3>

            <p class="text-justify text-color"><br /><br />text</p>   
        </div> <!-- end p-5 -->

      </div> <!-- end col -->

    </div> <!-- end row -->

    <div class="row">
        <div class="col-6 px-0">
            <div class="row h-50 bg-1"></div>
            <div class="row h-50 bg-2"></div>
        </div>
        <div class="col-6 px-0"><img class="img-fluid w-100" src="img/skin.jpg" alt="" /></div><!-- end col -->
    </div> <!-- end second row -->

</div> <!-- end class container fluid -->

Вот часть, которая не работает должным образом: 

<div class="row">
    <div class="col-6 px-0">
        <div class="row h-50 bg-1"></div>
        <div class="row h-50 bg-2"></div>
    </div>
    <div class="col-6 px-0"><img class="img-fluid w-100" src="img/skin.jpg" alt="" /></div><!-- end col -->
</div> <!-- end second row -->

Это CSS: 

body {
  font-family: 'Antic';
}

.navbar-custom {
  padding-top: 1rem;
  padding-bottom: 1rem;
  background-color: rgba(0, 0, 0, 0.7);
}

.navbar-custom .navbar-brand {
  text-transform: uppercase;
  font-size: 1rem;
  letter-spacing: 0.1rem;
  font-weight: 400;
}

.navbar-custom .navbar-nav .nav-item .nav-link {
  text-transform: uppercase;
  font-size: 1.2rem;
  font-weight: 400;
  letter-spacing: 0.1rem;
}

#navbarResponsive{
  margin-left: 21px;
}

.nav-item{
    text-align: right;
}

.bg-1{
  background-color: #cdb086;
}

.bg-2{
  background-color: green;
}

.img-top{
  margin-top: 73px;
}

.text-color{
  color: #767972;
}

.text-color-2{
  color: #cdb086;
}

.text-color-3{
  color: #FFFFFF;
}

Он должен показывать две строки, но вместо этого он ничего не показывает ... две строки должны быть коричневого и зеленого (это заполнитель для окончательного содержимого) .. Он показывает только столбец справа ..

Любой совет действительно ценится

...