为什么Bootstrap的jumbotron尺寸随时间更新变化？如何固定其大小？

jumbotron尺寸变动的核心原因是时间字符串长度变化时，内容撑开了容器，通过以下方式固定尺寸即可： #

方法1：直接固定jumbotron盒子尺寸 #

在你引入的style.css文件中添加以下样式：

.jumbotron {
  /* 宽度可根据你的布局需求调整，也可写固定像素值比如800px */
  width: 100%;
  /* 高度设置为比你预估的最大内容高度稍大的数值即可，按需调整 */
  min-height: 420px;
  /* 避免内边距、边框额外撑大盒子尺寸 */
  box-sizing: border-box;
  /* 如果内容超出可设为auto出现滚动条，不需要可以删掉 */
  overflow: auto;
}

如果不想改css文件，也可以直接给jumbotron的div加内联样式：

<div class="jumbotron" style="width:100%;min-height:420px;box-sizing:border-box;">

方法2：仅固定时间展示区域宽度（不改动jumbotron整体自适应逻辑） #

如果不想限制jumbotron的整体尺寸，只需要避免时间长度变化导致换行撑高盒子，给时间展示的span设置固定最小宽度即可：

#time {
  display: inline-block;
  /* 数值调整到能容纳最长的时间字符串即可，中文环境下一般280px足够 */
  min-width: 280px;
}

额外优化：修复定时器重复创建问题 #

你当前的JS逻辑会每秒重复创建新的定时器，长期运行会导致性能下降，替换成以下JS代码即可：

function display_time() {
  var a = new Date();
  let date = a.toLocaleString();
  document.getElementById("time").innerHTML = date;
}
window.onload = function() {
  // 页面加载完成先展示一次时间
  display_time();
  // 仅创建一次定时器即可
  setInterval(display_time, 1000);
}

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