ブートストラップ動的フォームがアライメントされていません

ブートストラップに複数のフィールドを持つ動的フォームを作成しています。新しいインラインフォームを追加すると、前のフォームと揃えられません。誰かが私を助けることができれば感謝します。ブートストラップ動的フォームがアライメントされていません

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

私はあなたがあなた自身の新しいものを追加することができますので、私は、単一の入力と実行ここ形式のこのタイプを求めていると思います。

フィールドセットは最初のフォーム自体で閉じられ、フィールドセットはその下の2つのdivで末尾に貼り付けられます。

<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

ブートストラップ動的フォームがアライメントされていません

答えて

関連する問題