Question

I am making a dynamic form with multiple fields in bootstrap and when I add a new inline form, it is not aligned with the previous one. I appreciate if someone can help me with that.

image of the form

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; 
}

Answer 1

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

如果没有动态创建，它似乎是对齐的。

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

尝试发布您的脚本。

//code is the same -- dont mind this

Answer 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>

Bootstrap dynamic form is not aligned

2 个答案: