使用 JavaScript 在 laravel 中添加输入

Question

我在表单中有一些输入字段。可以使用javascript动态添加。例如，如果我选择子项的数量，则在下面添加与我的选择数量相对应的 div，所有输入字段都是这样的。 [![在此处输入图片描述][1]][1]

[![在此处输入图片描述][2]][2]

但我想在选择孩子的数量后有这个表格 [![在此处输入图片描述][3]][3]

我的代码在这里：

            document.addEventListener("change",function(f){ //On ajoute un ecouteur d'evenement de type change, et on appelle l'evenement f
            var div = document.getElementById("bloc_enfants");
            div.innerHTML= '';
            var x = f.target.value; //On recupere la value du select
            for(i=1;i<=x;i++){
                var div_input = document.createElement("div");

                //Ajout d'un input pour les prénoms et nom
                var label_input = document.createElement("label");
                label_input.innerHTML='Prénoms et nom Enfant '+i;
                div_input.appendChild(label_input); //on ajoute le label dans la div input
                var input = document.createElement("input");
                input.setAttribute("class","form-control");
                input.setAttribute("name","prenoms_et_nom_enfant"+i);
                input.setAttribute("id","prenoms_et_nom_enfant"+i);
                input.setAttribute("required","required");
                div_input.appendChild(input);
                div.appendChild(div_input); //ajoute input dans div
                var input = document.createElement("div");

                //Ajout de deux boutons radios pour le sexe enfant
                var label_input = document.createElement("label");
                label_input.innerHTML='Sexe enfant '+i;
                div_input.appendChild(label_input); //on ajoute le label dans la div input
                var input = document.createElement("input");
                input.setAttribute("type","radio");
                input.setAttribute("class","form-control");
                input.setAttribute("name","sexe_enfant_"+i);
                input.setAttribute("id","sexe_enfant_"+i);
                input.setAttribute("required","required");
                div_input.appendChild(input);


                //Ajout d'un input pour la date de naissance
                var label_input = document.createElement("label");
                label_input.innerHTML='Date de naissance enfant '+i;
                div_input.appendChild(label_input); //on ajoute le label dans la div input
                var input = document.createElement("input");
                input.setAttribute("class","form-control");
                input.setAttribute("name","date_de_naissance_enfant_"+i);
                input.setAttribute("id","date_de_naissance_enfant_"+i);
                input.setAttribute("required","required");
                div_input.appendChild(input);
                var div_input = document.createElement("div");


            }

            })

 <div class="col-lg-12">
      <div class="col-lg-3">
            <select required class="form-control" name='nombre_denfants' id='nombre_denfants'>
                <option value="" disabled selected >Sélectionner le nombre d'enfants</option>
               <option name='nombre_denfants'>1</option>
               <option name='nombre_denfants'>2</option>
               <option name='nombre_denfants'>3</option>
               <option name='nombre_denfants'>4</option>
               <option name='nombre_denfants'>5</option>
               <option name='nombre_denfants'>6</option>
               <option name='nombre_denfants'>7</option>
               <option name='nombre_denfants'>8</option>
               <option name='nombre_denfants'>9</option>
               <option name='nombre_denfants'>10</option>
               <option name='nombre_denfants'>11</option>
               <option name='nombre_denfants'>12</option>
           </select>
        </div>
        <div class="col-lg-3"> </div>

        <div class="col-lg-3"> </div>

        <div class="col-lg-3"> </div>
  </div>
  
  <div class="row" style="margin-bottom:5px;margin-top:10px;margin-left:10px;">
        <div class="col-lg-3"> </div>
        <div class="col-lg-3" id="bloc_enfants"> </div>

        <div class="col-lg-3"> </div>

        <div class="col-lg-3"> </div>
  </div>

我的问题是：我怎样才能让每个 div 在同一行？ 有人能帮助我吗 [1]：https://i.stack.imgur.com/dgNXJ.png [2]：https://i.stack.imgur.com/fzsYm.png [3]：https://i.stack.imgur.com/Xu4Az.png

Answer 1

像这样<div class="row col-lg-12"> 添加类row。请阅读引导文档。