Bootstrap 4在iphone上保持cols的问题

Question

我有点困惑。我怎样才能让这个计时器在iPhone上保持在1行？在iPhone上，“=>”转到下一行，看起来非常糟糕https://ibb.co/k2iCfo

Bootstrap代码：

​

<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

用display-md-4替换display-4并添加一个display-sm-3就可以了。

Answer 2

您需要向父.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>

降低display-4的font-size

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

Answer 3

你可以在display-4类中把字体的大小调小一点。例如：

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

这是结果的图像：

​

​