javascript - 输入错误的尺寸

Question

您好，我正在使用 bootstrap 3.3.6，我不知道为什么会这样。基本上我使用的是 bootstrap 网格系统，我首先使用 col-md-12 div，然后使用 jQuery 我创建了 4 个 div，类为 col-md-3，里面有控件，但是当我调整窗口大小时，控件跳转到另一行并且留下一个空白。

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>

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>