输入尺寸错误

Question

您好我使用bootstrap 3.3.6并且我不知道为什么会这样。基本上我使用自举网格系统，我有mi第一个div与col-md-12然后与jQuery我创建4个div与类col-md-3与控件内，但当我调整窗口大小时控件跳转到其他线和留下一片空白。

＆＃13;

＆＃13;

var num = 0;
var lineas = "";
$('#agregar').click(function() {
  agregar();
});

function agregar() {
  num++;

  if (num <= 4) {
    if (num == 1) {
      lineas += '<div class="col-md-3 form-group">';
      lineas += '<label class="control-label hidden-print">Quality:</label">';
      lineas += '<input type="text" class="form-control hidden-print" id="aprob' + num + '"/>';
      lineas += '</div>';
      $('#aprobadores').append(lineas);

      lineas = "";
    }
    if (num == 2) {
      lineas += '<div class="col-md-3 form-group">';
      lineas += '<label class="control-label hidden-print">Manufacture:</label">';
      lineas += '<input type="text" class="form-control hidden-print" id="aprob' + num + '"/>';
      lineas += '</div>';
      $('#aprobadores').append(lineas);

      lineas = "";
    }
    if (num == 3) {
      lineas += '<div class="col-md-3 form-group">';
      lineas += '<label class="control-label hidden-print">Supp. Produccion:</label">';
      lineas += '<input type="text" class="form-control hidden-print" id="aprob' + num + '"/>';
      lineas += '</div>';
      $('#aprobadores').append(lineas);

      lineas = "";
    }
    if (num == 4) {
      lineas += '<div class="col-md-3 form-group">';
      lineas += '<label class="control-label hidden-print">Control de Documentos:</label">';
      lineas += '<input type="text" class="form-control hidden-print" id="aprob' + num + '"/>';
      lineas += '</div>';
      $('#aprobadores').append(lineas);

      lineas = "";
    }
  } else {
    $('#agregar').hide();
    $('#lbl1').hide();
  }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<div class="col-md-12" id="options">
  <div class="col-md-4">
    <label id="lbl1" class="control-label hidden-print">Add</label>
    <span class="btn btn-success btn-sm glyphicon glyphicon-plus-sign hidden-print" id="agregar"></span>
  </div>
</div>
<div class="col-md-12 hidden-print" id="aprobadores">
</div>

＆＃13;

＆＃13;

＆＃13;

jsFiddle

Answer 1

JS中的HTML字符串中存在拼写错误。您有</label">而不是</label>。

var num = 0;
var lineas = "";
$('#agregar').click(function() {
  agregar();
});

function agregar() {
  num++;

  if (num <= 4) {
    if (num == 1) {
      lineas += '<div class="col-md-3 form-group">';
      lineas += '<label class="control-label hidden-print">Quality:</label>';
      lineas += '<input type="text" class="form-control hidden-print" id="aprob' + num + '"/>';
      lineas += '</div>';
      $('#aprobadores').append(lineas);

      lineas = "";
    }
    if (num == 2) {
      lineas += '<div class="col-md-3 form-group">';
      lineas += '<label class="control-label hidden-print">Manufacture:</label>';
      lineas += '<input type="text" class="form-control hidden-print" id="aprob' + num + '"/>';
      lineas += '</div>';
      $('#aprobadores').append(lineas);

      lineas = "";
    }
    if (num == 3) {
      lineas += '<div class="col-md-3 form-group">';
      lineas += '<label class="control-label hidden-print">Supp. Produccion:</label>';
      lineas += '<input type="text" class="form-control hidden-print" id="aprob' + num + '"/>';
      lineas += '</div>';
      $('#aprobadores').append(lineas);

      lineas = "";
    }
    if (num == 4) {
      lineas += '<div class="col-md-3 form-group">';
      lineas += '<label class="control-label hidden-print">Control de Documentos:</label>';
      lineas += '<input type="text" class="form-control hidden-print" id="aprob' + num + '"/>';
      lineas += '</div>';
      $('#aprobadores').append(lineas);

      lineas = "";
    }
  } else {
    $('#agregar').hide();
    $('#lbl1').hide();
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<div class="col-md-12" id="options">
  <div class="col-md-4">
    <label id="lbl1" class="control-label hidden-print">Add</label>
    <span class="btn btn-success btn-sm glyphicon glyphicon-plus-sign hidden-print" id="agregar"></span>
  </div>
</div>
<div class="col-md-12 hidden-print" id="aprobadores">
</div>

Answer 2

也许是因为你使用过＆＃34; .form-group＆＃34;所以有保证金