如何使用html、JavaScript和Bootstrap创建动态/模块化的三件式表单输入

我对这个问题的研究没有成功，所以很抱歉我难以简明扼要地描述它

基本上，我正在建立一个网站，用户可以通过html表单>php提交“食谱”。我想让用户能够动态添加或减少步骤或成分（我在其他网站上也看到过，但我找不到简单的纯js解决方案）

无论如何，我构建了一些类似于我想要的东西（，），但我不相信这是一个很好的解决方案。为了检索表单信息，php代码基本上循环遍历materials和steps的ID，直到到达最后一个ID

虽然此解决方案可行，但我还遇到了两个问题：

第一种是每次用户键入时，每个输入的文本都保存在js数组中，这样就可以添加或删除新输入，而不会丢失文本。但是，在创建新的输入元素时，如果以前的文本太长，则会将其截断

---

第二个是，对于配料部分，我希望有一个元素，用户只能选择标准化的测量值（即mg、g、kg…），然后再选择一个数字量。我试过Bootstrap的输入组类，但是间隔非常奇怪，在移动设备上根本不起作用。有没有更好的方法来实现这一点？这也使我最初的解决方案彻底复杂化，因为现在的输入量将是原来的3倍。

你知道你的问题有多模糊，不是吗？换言之：你希望得到什么样的答案？发布一个标题为“如何创建…”的问题意味着您正在等待有人用指南回答？（！）首先，您开始描述问题解决方案的体系结构，并将其与您发现的似乎不喜欢的示例进行比较。其次，您陈述了两个小问题，如果您确实理解了代码，您应该能够解决这两个小问题。总而言之，你的问题最不清楚。请定义问题，将其划分为子问题并更正。@SlinkySloth我知道，但我不确定如何使其更清晰或简洁，这是我问题的一部分。我发布的示例是我当前的解决方案，我认为这些示例合理地描述了我试图实现的目标。你能看看第一个链接，告诉我如何描述我的问题吗？很抱歉给您带来麻烦。关于您的第一个问题，我在最新版本的Firefox、Chrome和Edge中试用了您的示例。没有出现这样的问题，或者至少我没有注意到这样的问题。多少个字符后，您注意到文本被截断了？关于你的第二个问题，你可以使用Bootstrap的边距和填充，以及垂直和水平对齐和输入组（请仔细阅读，并且）这真的很奇怪，我也不能重现这个问题。。。但我已经注意到好几次了。我必须继续调查。同时也感谢你的链接，我想我应该从一开始就更彻底地看一下。