Bootstrap动态表单没有对齐

我在自举中制作了一个带有多个字段的动态表单，当我添加一个新的内联表单时，它与前一个表单不一致。我很感激有人能帮助我。Bootstrap动态表单没有对齐

HTML：

<!-- start of the column with properties(form-control)--> 
    <div class="col-lg-8" id="property-col"> 
    <div class="container"> 
     <form class="form"> 

     <div class="row"> 
     <h3>Properties</h3> 
     <br> 
     </div> 

     <div class="row"> 
     <div class="form-group"> 
      <fieldset class="form-inline"> 
      <label class="control-label">Image Size:</label> 
      <select class="form-control" id="image-size-selector"> 
       <option value="128">128×128</option> 
       <option value="256">256×256</option> 
       <option value="512">512×512</option> 
       <option value="1024">1024×1024</option> 
      </select> 
      </fieldset> 
     </div> 
     </div> 

     <div class="row" id="dynamic_form"> 
     <div class="form-group form-horizontal"> 
      <label>Primitives</label> 
      <div class="container"> 
      <div class="form-inline" id="primitive_fields"> 
       <select class="input-small form-control" id="primitive-selector" name="PrimitiveChoose[]"> 
       <option value=" " disabled selected>primitive</option> 
       <option value="sphere">sphere</option> 
       <option value="triangle">triangle</option> 
       </select> 
       <input type="number" class="input-small form-control" id="diameter" name="Diameter[]" step="any" placeholder="diameter(D)"> 
       <input type="text" class="input-small form-control" id="sphere-position" name="SpherePosition[]" placeholder="(x, y, z)"> 
       <select class="input-small form-control" id="circle-color-selector" name="CircColorSelect[]" > 
       <option value=" " disabled selected>color</option> 
       <option value="red">red</option> 
       <option value="blue">blue</option> 
       <option value="green">green</option> 
       <option value="yellow">yellow</option>  
       </select> 
       <button type="button" class="btn btn-success btn-add" id="add_more"> <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> 
       </button> 
      </div> 
      </div> 
     </div> 
     </div>

CSS：

.form-inline .input-mini 
{ 
    width: 70px; 
    font-weight: bold; 
} 


.form-inline .input-small 
{ 
    width: 120px; 
    font-weight: bold; 
} 


#primitive-form > * 
{ 
    margin: 2px 2px; 
}

来源

2017-04-10 Pooneh

嗯，也许你需要创建一个codepen。

它似乎如果不动态创建对齐。

http://codepen.io/seiran/pen/LWwWgX

尝试后你的脚本。

//code is the same -- dont mind this

来源

2017-04-10 03:51:56 cebuseiran

我想你问这个类型的格式，在这里我跟单输入执行的，所以你可以添加自己的新事物。

fieldset在第一个窗体本身上被关闭，只需在那里用下面的两个div剪下fieldset并粘贴到最后。

<html> 
    <head> 
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
     <script language="javascript"> 
    $(document).ready(function(){ 
    var next = 1; 
    $(".add-more").click(function(e){ 
     e.preventDefault(); 
     var addto = "#field" + next; 
     var addRemove = "#field" + (next); 
     next = next + 1; 
     var newIn = '<input autocomplete="off" class="input form-control" id="field' + next + '" name="field' + next + '" type="text">'; 
     var newInput = $(newIn); 
     var removeBtn = '<button id="remove' + (next - 1) + '" class="btn btn-danger remove-me" >-</button></div><div id="field">'; 
     var removeButton = $(removeBtn); 
     $(addto).before(newInput); 
     $(addRemove).before(removeButton); 

      $('.remove-me').click(function(e){ 
       e.preventDefault(); 
       var fieldNum = this.id.charAt(this.id.length-1); 
       var fieldID = "#field" + fieldNum; 
       $(this).remove(); 
       $(fieldID).remove(); 
      }); 
    }); 



}); 

     </script> 
    </head> 
    <body> 
      <div class="container"> 
      <div class="row"> 
       <input type="hidden" name="count" value="1" /> 
       <div class="controls" id="profs"> 
         <form class="input-append"> 
          <div id="field"><input autocomplete="off" class="input" id="field1" name="prof1" type="text" placeholder="Type something" data-items="8"/><button id="b1" class="btn add-more" type="button">+</button></div> 
         </form> 

        </div> 
       </div> 
      </div> 
     </div> 
    </body> 
</html>

来源

2017-04-10 04:23:22 neevan

Bootstrap动态表单没有对齐

回答

相关问题