Некорректно работает Bootstrap v4 на Safari

109

27 сентября 2021, 06:10

Есть данный кусок кода

<div class="container-fluid d-flex align-content-center flex-wrap">
    <div class="container text-center">
        <div class="d-flex justify-content-center">
            <p class="title">лучшее заведение</p>
        </div>
        <div class="d-flex justify-content-center" style="margin-top: 20px">
            <p class="subtitle">Работаем с 12:00</p>
        </div>
        <div class="d-flex justify-content-center">
            <button class="booking btn btn-lg btn-outline-light">Резервация столика</button>
        </div>
    </div>
</div>

Три div внутри div.container в Chrome браузере отображаются вертикально по центру, но только не в Safari. Не знаю, что с этим делать, опыта не так много, узнал недавно и так как у многих юзеров Safari, все это выглядит не очень.

Answer 1

Советую вам почитать о сетке bootstrap. Зачем использовать container внутри container-fluid?

Думаю, что это решит вашу проблему:

<div class="container text-center">
  <div class="row">
    <div class="col-12">
      <p class="title">лучшее заведение</p>
    </div>
    <div class="col-12" style="margin-top: 20px">
      <p class="subtitle">Работаем с 12:00</p>
    </div>
    <div class="col-12">
      <button class="booking btn btn-lg btn-outline-light">Резервация столика</button>
    </div>
  </div>
</div>