Bootstrap 4 проблема с сохранением cols подряд на iphone

Question

Я немного озадачен.Как я могу получить этот таймер здесь, чтобы оставаться в 1 строке на iPhone?На iPhone «секунды» переходят на следующую строку и выглядят довольно плохо => https://ibb.co/k2iCfo

Код начальной загрузки:

<div class="container text-center">
  <div class="row text-center">
    <div id = "timer_frame" class="col-md-12"> 
      <div class="row justify-content-md-center d-flex">
        <div class="col text-center col_bg">
          <span class="days display-4 timer_font_color"></span>
          <span class="d-block timer_font_color">Days</span>
        </div>

        <div class="col text-center timer_font_color col_bg">
          <span class="hours display-4 timer_font_color"></span>
          <span class="d-block timer_font_color">Hours</span>
        </div>
        
        <div class="col text-center timer_font_color col_bg">
          <span class="minutes display-4"></span>
          <span class="d-block timer_font_color">Minutes</span>
        </div>

        <div class="col text-center timer_font_color col_bg">
          <span class="seconds display-4"></span>
          <span class="d-block timer_font_color">Seconds</span>
        </div>
      </div>
    </div>
  </div>
</div>

Ссылка => https://webmoosh.com/login

А вот и необработанная страница => http://webmoosh.com/broadcast.html

Спасибо

Answer 1

Я закончил с использованием медиа-запросов, работает хорошо.

@media (min-width: 576px) 
      {  
        span.days, span.hours, span.minutes, span.seconds
          {
            font-size: 30px;
          }
      }
   @media (min-width: 768px)
      {  
        span.days, span.hours, span.minutes, span.seconds 
          {
            font-size: 50px;
          }
      }

    @media (min-width: 992px)
      {  
        span.days, span.hours, span.minutes, span.seconds 
          {
            font-size: 50px;
          }
      }

     @media (min-width: 1200px)
      {  
        span.days, span.hours, span.minutes, span.seconds 
          {
            font-size: 50px;
          }
      }

Answer 2

Измените ваши col классы на col-xs-3 и ваши display-4 классы на display-xs-3

<div class="container text-center">
  <div class="row text-center">
    <div id = "timer_frame" class="col-md-12"> 
      <div class="row justify-content-md-center d-flex">
        <div class="col-xs-3 text-center col_bg">
          <span class="days display-xs-3 timer_font_color"></span>
          <span class="d-block timer_font_color">Days</span>
        </div>

        <div class="col-xs-3 text-center timer_font_color col_bg">
          <span class="hours display-xs-3 timer_font_color"></span>
          <span class="d-block timer_font_color">Hours</span>
        </div>

        <div class="col-xs-3 text-center timer_font_color col_bg">
          <span class="minutes display-xs-3"></span>
          <span class="d-block timer_font_color">Minutes</span>
        </div>

        <div class="col-xs-3 text-center timer_font_color col_bg">
          <span class="seconds display-xs-3"></span>
          <span class="d-block timer_font_color">Seconds</span>
        </div>
      </div>
    </div>
  </div>
</div>

Измените также это правило на свой col_bg класс, чтобы лучше центрировать плитки

.col_bg{
    margin: 3px;
}

Answer 3

Я бы подошел к вашей структуре немного по-другому и использовал бы класс no-gutters для удаления отступов между каждым столбцом.Как только вы удалите его, вы сможете поиграть со значениями полей, не повреждая макет в определенных точках останова.

  $(function() {
    var timezone = "Atlantic/Madeira",
        offer_open_date_time = "2020-06-03 04:30",
        $clock = $('.days');

    $clock.on('update.countdown', function(event) {
      $(".days").text(event.strftime("%-D"));
      $(".hours").text(event.strftime("%-H"));
      $(".minutes").text(event.strftime("%-M"));
      $(".seconds").text(event.strftime("%-S"));
    });
        
    updateCountdown();
        
    function updateCountdown() {
      var date = moment.tz("2020-06-03 04:30", "YYYY-MM-DD HH:mm", timezone);
      $clock.countdown(date.toDate());
    }
  });

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<script src="https://webmoosh.com/components/js/moment-with-locales.min.js"></script>
<script src="https://webmoosh.com/components/js/moment-timezone-with-data-2010-2020.min.js"></script>
<script src="https://webmoosh.com/components/js/jquery.js"></script>
<script src="https://webmoosh.com/components/js/jquery.countdown.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>

<div class="container-fluid">
  <div class="row no-gutters text-center" id="timer_frame">
    <div class="col">
      <div class="bg-dark text-secondary rounded mr-1">
        <span class="days display-4 display-md-3 d-block">12</span>
        <span class="d-block timer_font_color">Days</span>
      </div>
    </div>
        
    <div class="col">
      <div class="bg-dark text-secondary rounded mr-1">
        <span class="hours display-4 display-md-3 d-block">24</span>
        <span class="d-block timer_font_color">Hours</span>
      </div>
    </div>
        
    <div class="col">
      <div class="bg-dark text-secondary rounded mr-1">
      <span class="minutes display-4 display-md-3 d-block">60</span>
      <span class="d-block timer_font_color">Minutes</span>
      </div>
    </div>
        
    <div class="col">
      <div class="bg-dark text-secondary rounded">
        <span class="seconds display-4 display-md-3 d-block">60</span>
        <span class="d-block timer_font_color">Seconds</span>
      </div>
    </div>
  </div>
</div>

Это отображается в одной строке на моем iPhone 6S как в горизонтальном, так и в портретном режиме.В целом структура не сильно отличается от вашей ... Я удалил дополнительный row и привязал объявление #timer_frame к оболочке row no-gutters text-center.Большинство остальных изменений заключаются в некотором адаптивном размере для display-* и выталкивании некоторых ваших пользовательских CSS в пользу встроенных служебных классов Bootstrap (например, rounded или m*-* для увеличения полей).

Не стесняйтесь игнорировать бит bg-dark text-secondary;Я не хотел писать собственный CSS, чтобы применить раскраску для примера кода:)

Answer 4

В классе "row" используйте "flex-nowrap", а в классе "col_bg" удалите поле и используйте вместо него отступы.последний div ломается, потому что у строки есть свойство flex-wrap: wrap.Надеюсь, это поможет.

Answer 5

вот код начальной загрузки для этого, он будет работать:

xs (для телефонов - экраны шириной менее 768 пикселей)

см (для планшетов - экраны шириной 768 пикселей или больше)

md (для небольших ноутбуков - экраны шириной не менее 992 пикселей или более)

lg (для ноутбуков и настольных компьютеров - экраны шириной 1200 пикселей или более)

<div class="container-fluid img-fluid">
  <div class="row">
    <div class="col-3 col-sm-3 col-lg-3" >days code goes here </div>
    <div class="col-3 col-sm-3 col-lg-3" >hours code goes here</div>
    <div class="col-3 col-sm-3 col-lg-3" >minutes code goes here</div>
    <div class="col-3 col-sm-3 col-lg-3" >seconds code goes here</div>
  </div>
</div>

Answer 6

Замена display-4 на display-md-4 и добавление display-sm-3 поможет.

Answer 7

Вы можете уменьшить размер шрифта в классе display-4.Например:

.display-4 {
   font-size: 2.5rem;
   font-weight: 300;
   line-height: 1.2;
}

А вот изображение результата:

Answer 8

Вам необходимо добавить классы к родителю .row

<div class="row justify-content-md-center d-flex row  flex-nowrap flex-sm-wrap">
    <div class="col text-center col_bg">
      <span class="days display-4 timer_font_color">741</span>
      <span class="d-block timer_font_color">Days</span>
    </div>

    <div class="col text-center timer_font_color col_bg">
      <span class="hours display-4 timer_font_color">14</span>
      <span class="d-block timer_font_color">Hours</span>
    </div>

    <div class="col text-center timer_font_color col_bg">
      <span class="minutes display-4">52</span>
      <span class="d-block timer_font_color">Minutes</span>
    </div>

    <div class="col text-center timer_font_color col_bg">
      <span class="seconds display-4">21</span>
      <span class="d-block timer_font_color">Seconds</span>
    </div>
  </div>

и уменьшить font-size из display-4

 @media screen and (max-width: 360px) {
      .display-4 {
         font-size: 2.0rem;
       }
    }