BS4 响应式倒数计时器

Question

我的网站上嵌入了一个倒数计时器，它运行良好并使用以下 html：

<div id="clockdiv">
  <div>
    <span class="days"></span>
    <div class="smalltext">Days</div>
  </div>
  <div>
    <span class="hours"></span>
    <div class="smalltext">Hours</div>
  </div>
  <div>
    <span class="minutes"></span>
    <div class="smalltext">Minutes</div>
  </div>
  <div>
    <span class="seconds"></span>
    <div class="smalltext">Seconds</div>
  </div>
</div>

Codepen：https://codepen.io/Darlton29/pen/OJNzXEB

但是，在移动设备上，当我希望 4 个块响应地形成一个立方体时，问题就出现了，并且间隔正确。 2 x 2 堆叠。它似乎移动到最后一个最大的块，但是我似乎无法让它为其他块工作，并且保持均匀间隔。我正在使用 Bootstrap 4。

CSS：

#clockdiv{
    font-family: sans-serif;
    color: #fff;
    display: inline-block;
    font-weight: 100;
    text-align: center;
    font-size: 30px;
}

#clockdiv > div{
    padding: 10px;
    border-radius: 3px;
    background: #00BF96;
    display: inline-block;
}

#clockdiv div > span{
    padding: 15px;
  padding-top: 10px;
  padding-bottom: 10px;
    border-radius: 3px;
    background: #00816A;
    display: inline-block;
}

.smalltext{
    padding-top: 2px;
  padding-bottom: -10px;
    font-size: 16px;
}

Answer 1

这是您问题的解决方案。 https://codepen.io/Ultra_Hopeful/pen/bGpLeRK

function getTimeRemaining(endtime) {
  var t = Date.parse(endtime) - Date.parse(new Date());
  var seconds = Math.floor((t / 1000) % 60);
  var minutes = Math.floor((t / 1000 / 60) % 60);
  var hours = Math.floor((t / (1000 * 60 * 60)) % 24);
  var days = Math.floor(t / (1000 * 60 * 60 * 24));
  return {
    'total': t,
    'days': days,
    'hours': hours,
    'minutes': minutes,
    'seconds': seconds
  };
}

function initializeClock(id, endtime) {
  var clock = document.getElementById(id);
  var daysSpan = clock.querySelector('.days');
  var hoursSpan = clock.querySelector('.hours');
  var minutesSpan = clock.querySelector('.minutes');
  var secondsSpan = clock.querySelector('.seconds');

  function updateClock() {
    var t = getTimeRemaining(endtime);

    daysSpan.innerHTML = ('0' + t.days).slice(-2);
    hoursSpan.innerHTML = ('0' + t.hours).slice(-2);
    minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
    secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);

    if (t.total <= 0) {
      clearInterval(timeinterval);
    }
  }

  updateClock();
  var timeinterval = setInterval(updateClock, 1000);
}

var deadline = new Date(Date.parse(new Date("sep 18, 2020 15:37:25")));


initializeClock('clockdiv', deadline);

#clockdiv{
  font-family: sans-serif;
  color: #fff;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap:5px;
  width:fit-content;
  font-weight: 100;
  text-align: center;
  font-size: 30px;
}
#clockdiv div{
  border-radius: 3px;
  padding:5px;
  background: #00BF96;
}

#clockdiv div > span{
  padding: 15px;
  padding-top: 10px;
  padding-bottom: 10px;
  border-radius: 3px;
  font-size:100%;
  background: #00816A;
}

.smalltext{
  padding: 4px 0px 5px 0px;
  font-size:16px;
}
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) { #clockdiv { grid-template-columns: 1fr 1fr; } }

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) { #clockdiv { grid-template-columns: 1fr 1fr; } }

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) { #clockdiv { grid-template-columns: 1fr 1fr 1fr 1fr; } }

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {...}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {...}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<section style="background-color: pink; color: white;">
  <div class="container-fluid mt-5">
    <h1>BIRTHDAY COUNTDOWN</h1>
    <div id="clockdiv">

      <div>
        <span class="days"></span>
        <div class="smalltext">Days</div>
      </div> 

      <div>
        <span class="hours"></span>
        <div class="smalltext">Hours</div>
      </div> 

      <div>
        <span class="minutes"></span>
        <div class="smalltext">Minutes</div>
      </div> 

      <div>
        <span class="seconds"></span>
        <div class="smalltext">Seconds</div>
      </div>

    </div>
  </div>
</section>