Css Bootstrap 4在iphone上保持COL连续的问题

我有点困惑。我怎样才能让这个计时器在iPhone上保持一行？在iPhone上，“秒”进入下一行，看起来很糟糕=>

引导代码：

天
小时
会议记录
秒

您需要将类添加到父级

.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类中使字体的大小稍微小一点。例如：

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

下面是结果的图像：

---

用

display-md-4

替换

display-4

并添加

display-sm-3

即可

以下是它的引导代码，这将起作用：

xs（用于手机-屏幕宽度小于768px）

sm（用于平板电脑-屏幕宽度等于或大于768px）

md（适用于小型笔记本电脑-屏幕宽度等于或大于992px）

lg（适用于笔记本电脑和台式电脑-屏幕宽度等于或大于1200px）

代码在这里
这里是小时代码
这里是分钟代码
秒代码在这里

对于“row”类，使用“flex nowrap”和“col_bg”类删除边距并使用填充。最后一个div正在中断，因为行具有flex wrap:wrap属性。希望有帮助。

将您的

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>

---

我将以稍微不同的方式处理您的结构，并使用

no-gutters

类删除每个列之间的填充。删除后，可以使用边距值，而不会在某些断点处无意中破坏布局

$（函数（）{
var timezone=“大西洋/马德拉”，
报价日期时间=“2020-06-03 04:30”，
$clock=$（“.days”）；
$clock.on（'update.countdown'，函数（事件）{
$（“.days”）.text（event.strftime（“%D”）；
$（“.hours”）.text（event.strftime（“%-H”）；
$（“.minutes”）.text（event.strftime（“%-M”）；
$（“.seconds”）.text（event.strftime（“%S”）；
});
updateCountdown（）；
函数updateCountdown（）{
var日期=时刻tz（“2020-06-03 04:30”，“YYYY-MM-DD HH:MM”，时区）；
$clock.countdown（date.toDate（））；
}
});

12
天
24
小时
60
会议记录
60
秒
我最终使用了媒体查询，效果很好


@介质（最小宽度：576px）
{  
span.天，span.小时，span.分钟，span.秒
{
字体大小：30px；
}
}
@介质（最小宽度：768px）
{  
span.天，span.小时，span.分钟，span.秒
{
字体大小：50px；
}
}
@介质（最小宽度：992px）
{  
span.天，span.小时，span.分钟，span.秒
{
字体大小：50px；
}
}
@介质（最小宽度：1200px）
{  
span.天，span.小时，span.分钟，span.秒
{
字体大小：50px；
}
}
对于移动设备，请尝试col-xs-3而不是coluse
col-xs-3
；对于平板电脑，
col-md-3
对于笔记本电脑，
-xs
后缀已在引导程序4中删除。@RobertC谢谢！我不知道。你给了我下午的工作OP已指定他们正在使用Bootstrap 4，它不再支持列大小调整中的
-xs
后缀
img responsive
现在也是
img fluid
，尽管我不清楚为什么会出现在您的示例代码中。@RobertC我已经做了必要的更改。
<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>

<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{
    margin: 3px;
}