對齊是不正確的，當我動態添加div使用jquery

您好實現添加更多的功能，當我的網頁動態添加表單字段進行良好，但它沒有正確添加row-wise表單字段去那裏如何做對齊表單字段逐行這裏，我有移動+按鈕右端，做任何暗示，如果我在代碼中錯誤的任何地方對齊是不正確的，當我動態添加div使用jquery

$('#clone_button').click(function() { 
 
    $('#clone_wrapper') 
 
    .clone() 
 
    .append('clone') 
 
    .appendTo($('#clone_wrapper')); 
 
});

<link href="https://s3.ap-south-1.amazonaws.com/testbucket092601/material-style-1.5.2/HTML/assets/css/preload.min.css" rel="stylesheet"/> 
 
<link rel="stylesheet" href="https://s3.ap-south-1.amazonaws.com/testbucket092601/material-style-1.5.2/HTML/assets/css/plugins.min.css"> 
 
    <link rel="stylesheet" href="https://s3.ap-south-1.amazonaws.com/testbucket092601/material-style-1.5.2/HTML/assets/css/style.light-blue-500.min.css"> 
 
    <script src="https://s3.ap-south-1.amazonaws.com/testbucket092601/material-style-1.5.2/HTML/assets/js/plugins.min.js"></script> 
 
    <script src="https://s3.ap-south-1.amazonaws.com/testbucket092601/material-style-1.5.2/HTML/assets/js/app.min.js"></script> 
 
<div id="ms-preload" class="ms-preload"> 
 
     <div id="status"> 
 
     <div class="spinner"> 
 
      <div class="dot1"></div> 
 
      <div class="dot2"></div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="bg-full-page bg-primary back-fixed"> 
 
     <div class="md-500 absolute-center"> 
 
\t 
 
\t <div class="col-lg-10 col-md-offset-1"> 
 
     <div class="card"> 
 
      <div class="card-block"> 
 
\t \t <<h1 class="color-primary text-big">Let's Add User</h1> 
 
      <div class="col-md-2"> 
 
\t \t \t <div class="row "> 
 
\t \t \t \t \t \t <button class="btn btn-raised btn-primary btn-block " id="clone_button"> 
 
         + <i class="zmdi zmdi-account"></i></button> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t </div> 
 
\t \t \t   <form> 
 
       <fieldset> 
 
\t \t \t <div id="clone_wrapper"> 
 
\t \t \t <div class="col-md-3 form-line"> 
 
       
 
\t \t \t \t <div class="form-group"> 
 
         <label for="select111" class="col-md-2 control-label">Role</label> 
 
         <div class="col-md-10"> 
 
          <select id="select111" class="form-control selectpicker" data-dropup-auto="false"> 
 
          <option>Ea nam qui vel consequatur</option> 
 
          <option>Dolorem perspiciatis adipisci </option> 
 
          <option>Aperiam, debitis deleniti</option> 
 
          <option>Accusamus non qui amet eum</option> 
 
          <option>Doloremque commodi impedit</option> 
 
          </select> 
 
         </div> 
 
         </div> 
 
\t \t \t \t </div> 
 
\t \t \t \t 
 
\t \t \t \t <div class="col-md-2 form-line"> 
 
       <div class="form-group label-floating"> 
 
        <div class="input-group"> 
 
        
 
        <label class="control-label" for="ms-form-user">First Name</label> 
 
        <input type="text" id="ms-form-user" class="form-control"> </div> 
 
       </div> 
 
\t \t \t \t </div> 
 
\t \t \t \t 
 
\t \t \t \t <div class="col-md-2 form-line"> 
 
\t \t \t \t <div class="form-group label-floating"> 
 
        <div class="input-group"> 
 
        
 
        <label class="control-label" for="ms-form-pass">Last Name</label> 
 
        <input type="password" id="ms-form-pass" class="form-control"> </div> 
 
       </div> 
 
\t \t \t \t </div> 
 
\t \t \t \t <div class="col-md-2 form-line"> 
 
\t \t \t \t <div class="form-group label-floating"> 
 
        <div class="input-group"> 
 
        
 
        <label class="control-label" for="ms-form-pass">Email</label> 
 
        <input type="password" id="ms-form-pass" class="form-control"> </div> 
 
       </div> 
 
\t \t \t \t </div> 
 
\t \t \t \t 
 
\t \t \t \t <div class="col-md-2 form-line"> 
 
\t \t \t \t 
 
\t \t \t \t <div class="form-group"> 
 
         <label for="select111" class="col-md-2 control-label">Profile</label> 
 
         <div class="col-md-2"> 
 
          <select id="select111" class="form-control selectpicker" data-dropup-auto="false"> 
 
          <option>Ea nam qui vel consequatur</option> 
 
          <option>Dolorem perspiciatis adipisci </option> 
 
          <option>Aperiam, debitis deleniti</option> 
 
          <option>Accusamus non qui amet eum</option> 
 
          <option>Doloremque commodi impedit</option> 
 
          </select> 
 
         </div> 
 
         </div> 
 
       </div> \t 
 
</div> \t \t \t \t  
 

 
\t \t \t 
 
\t \t <div class="col-md-4"> 
 
       <div class="row "> 
 
        <div class="col-md-5 form-line"> 
 
\t \t \t \t <button class="btn btn-raised btn-block">back</button> 
 
        </div> 
 
        <div class="col-md-5 form-line"> 
 
        <button class="btn btn-raised btn-primary btn-block">Done</button> 
 
        </div> 
 
       </div> \t 
 
</div> 
 
\t \t \t 
 
       </fieldset> 
 
      </form> 
 
      </div> 
 
     </div> 
 
\t \t </div> 
 
\t \t 
 
     </div>

<div id="ms-preload" class="ms-preload"> 
     <div id="status"> 
     <div class="spinner"> 
      <div class="dot1"></div> 
      <div class="dot2"></div> 
     </div> 
     </div> 
    </div> 
    <div class="bg-full-page bg-primary back-fixed"> 
     <div class="md-500 absolute-center"> 

     <div class="col-lg-10 col-md-offset-1"> 
     <div class="card"> 
      <div class="card-block"> 
      <<h1 class="color-primary text-big">Let's Add User</h1> 
      <div class="col-md-2"> 
       <div class="row "> 
          <button class="btn btn-raised btn-primary btn-block " id="clone_button"> 
         + <i class="zmdi zmdi-account"></i></button> 
        </div> 
        </div> 
        <form> 
       <fieldset> 
       <div id="clone_wrapper"> 
       <div class="col-md-3 form-line"> 

        <div class="form-group"> 
         <label for="select111" class="col-md-2 control-label">Role</label> 
         <div class="col-md-10"> 
          <select id="select111" class="form-control selectpicker" data-dropup-auto="false"> 
          <option>Ea nam qui vel consequatur</option> 
          <option>Dolorem perspiciatis adipisci </option> 
          <option>Aperiam, debitis deleniti</option> 
          <option>Accusamus non qui amet eum</option> 
          <option>Doloremque commodi impedit</option> 
          </select> 
         </div> 
         </div> 
       </div> 

       <div class="col-md-2 form-line"> 
       <div class="form-group label-floating"> 
        <div class="input-group"> 

        <label class="control-label" for="ms-form-user">First Name</label> 
        <input type="text" id="ms-form-user" class="form-control"> </div> 
       </div> 
       </div> 

       <div class="col-md-2 form-line"> 
       <div class="form-group label-floating"> 
        <div class="input-group"> 

        <label class="control-label" for="ms-form-pass">Last Name</label> 
        <input type="password" id="ms-form-pass" class="form-control"> </div> 
       </div> 
       </div> 
       <div class="col-md-2 form-line"> 
       <div class="form-group label-floating"> 
        <div class="input-group"> 

        <label class="control-label" for="ms-form-pass">Email</label> 
        <input type="password" id="ms-form-pass" class="form-control"> </div> 
       </div> 
       </div> 

       <div class="col-md-2 form-line"> 

        <div class="form-group"> 
         <label for="select111" class="col-md-2 control-label">Profile</label> 
         <div class="col-md-2"> 
          <select id="select111" class="form-control selectpicker" data-dropup-auto="false"> 
          <option>Ea nam qui vel consequatur</option> 
          <option>Dolorem perspiciatis adipisci </option> 
          <option>Aperiam, debitis deleniti</option> 
          <option>Accusamus non qui amet eum</option> 
          <option>Doloremque commodi impedit</option> 
          </select> 
         </div> 
         </div> 
       </div> 
</div>     


      <div class="col-md-4"> 
       <div class="row "> 
        <div class="col-md-5 form-line"> 
        <button class="btn btn-raised btn-block">back</button> 
        </div> 
        <div class="col-md-5 form-line"> 
        <button class="btn btn-raised btn-primary btn-block">Done</button> 
        </div> 
       </div> 
</div> 

       </fieldset> 
      </form> 
      </div> 
     </div> 
     </div> 

     </div>

來源

2017-10-17 mantelinga r

嘗試'$（ '＃clone_button'）。在（「點擊」，函數（）{......}'代替 –

你需要在每一個增加新形式按鈕c舔，但你克隆整個新形成的元素（form）。

查看每個新創建的form-group添加到fieldset的更新代碼。並且爲每個新的form-group應用類row，以便它可用於新行。

var clones = 1; 
 
$('#clone_button').click(function() { 
 
    $('#clone_wrapper') 
 
    .clone() 
 
    .append('clone').attr('id', '#clone_wrapper' + clones++) 
 
    .appendTo($('.form-set')); 
 
});

.form-set #clone_wrapper{ 
 
    display: block; 
 
}

<link href="https://s3.ap-south-1.amazonaws.com/testbucket092601/material-style-1.5.2/HTML/assets/css/preload.min.css" rel="stylesheet" /> 
 
<link rel="stylesheet" href="https://s3.ap-south-1.amazonaws.com/testbucket092601/material-style-1.5.2/HTML/assets/css/plugins.min.css"> 
 
<link rel="stylesheet" href="https://s3.ap-south-1.amazonaws.com/testbucket092601/material-style-1.5.2/HTML/assets/css/style.light-blue-500.min.css"> 
 
<script src="https://s3.ap-south-1.amazonaws.com/testbucket092601/material-style-1.5.2/HTML/assets/js/plugins.min.js"></script> 
 
<script src="https://s3.ap-south-1.amazonaws.com/testbucket092601/material-style-1.5.2/HTML/assets/js/app.min.js"></script> 
 
<div id="ms-preload" class="ms-preload"> 
 
    <div id="status"> 
 
    <div class="spinner"> 
 
     <div class="dot1"></div> 
 
     <div class="dot2"></div> 
 
    </div> 
 
    </div> 
 
</div> 
 
<div class="bg-full-page bg-primary back-fixed"> 
 
    <div class="md-500 absolute-center"> 
 

 
    <div class="col-lg-10 col-md-offset-1"> 
 
     <div class="card"> 
 
     <div class="card-block"> 
 
      <<h1 class="color-primary text-big">Let's Add User</h1> 
 
      <div class="col-md-2"> 
 
       <div class="row "> 
 
       <button class="btn btn-raised btn-primary btn-block " id="clone_button"> 
 
         + <i class="zmdi zmdi-account"></i></button> 
 
       </div> 
 
      </div> 
 
      <form> 
 
       <fieldset class="form-set"> 
 
       <div id="clone_wrapper" class="row"> 
 
        <div class="col-md-3 form-line"> 
 

 
        <div class="form-group"> 
 
         <label for="select111" class="col-md-2 control-label">Role</label> 
 
         <div class="col-md-10"> 
 
         <select id="select111" class="form-control selectpicker" data-dropup-auto="false"> 
 
          <option>Ea nam qui vel consequatur</option> 
 
          <option>Dolorem perspiciatis adipisci </option> 
 
          <option>Aperiam, debitis deleniti</option> 
 
          <option>Accusamus non qui amet eum</option> 
 
          <option>Doloremque commodi impedit</option> 
 
          </select> 
 
         </div> 
 
        </div> 
 
        </div> 
 

 
        <div class="col-md-2 form-line"> 
 
        <div class="form-group label-floating"> 
 
         <div class="input-group"> 
 

 
         <label class="control-label" for="ms-form-user">First Name</label> 
 
         <input type="text" id="ms-form-user" class="form-control"> </div> 
 
        </div> 
 
        </div> 
 

 
        <div class="col-md-2 form-line"> 
 
        <div class="form-group label-floating"> 
 
         <div class="input-group"> 
 

 
         <label class="control-label" for="ms-form-pass">Last Name</label> 
 
         <input type="password" id="ms-form-pass" class="form-control"> </div> 
 
        </div> 
 
        </div> 
 
        <div class="col-md-2 form-line"> 
 
        <div class="form-group label-floating"> 
 
         <div class="input-group"> 
 

 
         <label class="control-label" for="ms-form-pass">Email</label> 
 
         <input type="password" id="ms-form-pass" class="form-control"> </div> 
 
        </div> 
 
        </div> 
 

 
        <div class="col-md-2 form-line"> 
 

 
        <div class="form-group"> 
 
         <label for="select111" class="col-md-2 control-label">Profile</label> 
 
         <div class="col-md-2"> 
 
         <select id="select111" class="form-control selectpicker" data-dropup-auto="false"> 
 
          <option>Ea nam qui vel consequatur</option> 
 
          <option>Dolorem perspiciatis adipisci </option> 
 
          <option>Aperiam, debitis deleniti</option> 
 
          <option>Accusamus non qui amet eum</option> 
 
          <option>Doloremque commodi impedit</option> 
 
          </select> 
 
         </div> 
 
        </div> 
 
        </div> 
 
       </div> 
 
       </fieldset> 
 
       <div class="row "> 
 
        <div class="col-md-6"></div> 
 
        <div class="col-md-3 form-line"> 
 
         <button class="btn btn-raised btn-block">back</button> 
 
        </div> 
 
        <div class="col-md-3 form-line"> 
 
         <button class="btn btn-raised btn-primary btn-block">Done</button> 
 
        </div> 
 
        </div> 
 
      </form> 
 
     </div> 
 
     </div> 
 
    </div> 
 

 
    </div>

來源

2017-10-19 11:14:38

對齊是不正確的，當我動態添加div使用jquery

回答

相關問題