如何将输入字段分区为在屏幕上显示为单独的输入字段？

看图像:

我希望设计像图像中的东西,用户输入4位一次性密码(OTP).现在我通过4个独立的输入实现了这一点,然后在javascript中组合了值:

我不确定这是否正确.我认为必须有一些样式选项,通过这些样式选项,一个输入文本框将像图像中一样显示为分区文本框.是否可以使用bootstrap？如何将一个输入控件设置为输入的分区字段？

你不必保留4个单独的字段;

首先你应该调整字符间距,然后调整底部的边框样式...

#partitioned {
  padding-left: 15px;
  letter-spacing: 42px;
  border: 0;
  background-image: linear-gradient(to left, black 70%, rgba(255, 255, 255, 0) 0%);
  background-position: bottom;
  background-size: 50px 1px;
  background-repeat: repeat-x;
  background-position-x: 35px;
  width: 220px;
}