Bootstrap 4 iPhone端列布局问题：计时器无法单行显示

I’ve run into similar layout headaches with Bootstrap on mobile devices before—let’s get this timer looking clean on iPhones. The issue here is likely a mix of column width constraints and oversized text pushing either the "Seconds" label or the entire column to wrap. Here are targeted fixes to resolve this:

1. Lock Columns to Stay in a Row on All Screens #

Your current col classes will stack vertically on extra-small screens (like iPhones in portrait mode). Instead, use responsive column classes to guarantee all four time blocks stay side-by-side, even on the smallest devices:

<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 flex-nowrap">
        <!-- Use col-3 to split 12 columns evenly across 4 blocks -->
        <div class="col-3 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-3 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-3 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-3 text-center timer_font_color col_bg">
          <span class="seconds display-4"></span>
          <span class="d-block timer_font_color text-nowrap">Seconds</span>
        </div>
      </div>
    </div>
  </div>
</div>

Key tweaks:

• Added col-3 to each time block (12 total columns ÷ 4 blocks = 3 columns per block)
• Added flex-nowrap to the inner row to prevent the entire timer row from wrapping
• Added text-nowrap to the "Seconds" label to stop the word itself from breaking onto two lines

2. Shrink Font Sizes for Mobile #

The display-4 class is way too large for small screens. Use either Bootstrap’s responsive text classes or custom CSS to scale things down:

Option A: Bootstrap Responsive Text #

Swap display-4 with a combination of classes that adjust based on screen size:

<span class="days h3 h-md-display-4 timer_font_color"></span>

(Note: Bootstrap 4 doesn’t include mobile-specific h-xs-* classes by default, so custom media queries are more flexible.)

Option B: Custom Media Query #

Add this to your stylesheet to target iPhone-sized screens specifically:

@media (max-width: 576px) {
  .display-4 {
    font-size: 1.8rem; /* Tweak this value to fit your layout */
  }
  .timer_font_color {
    font-size: 0.9rem; /* Shrink label text to match */
  }
}

3. Trim Excess Padding/Margins #

If columns are still wrapping, cut down on unnecessary spacing to free up horizontal room:

.col_bg {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  margin: 0 0.25rem;
}

Test these changes on an iPhone (or use Chrome DevTools’ mobile emulator) to find the perfect balance. The core goal is to make sure each column has just enough space to fit both the number and label without wrapping.

内容的提问来源于stack exchange，提问作者ben jaz