I'm trying to align the elements, but to no avail. The idea is to limit only 8 elements per line, in addition to not doing so, it still returns error:
Misalignedelements:
Codes:
Html:
<divclass="col-lg-12">
<div class="box">
<div class="box-header">
<i class="fa fa-eye"></i>
<h3 class="box-title">
Eventos por Operador
</h3>
</div>
<div class="box-body" id="bolhas">
<!-- Carregar os elementos do JavaScript aqui -->
</div>
<div class="overlay">
<i class="fa fa-refresh fa-spin"></i>
</div>
</div>
</div>
JavaScript:
function PreencherBolhas(){
$.ajax({
async: false,
type: 'GET',
url: '/Developer/GetContadoresOperadoresEventos',
success: function (data) {
var linha = "<div class='col-lg-6' style='padding-right:0px;'>";
var row = "<div class='col-lg-6' style='padding-right:0px;'>";
for (var i = 0; i < data.length; i++) {
var temp = data[i];
linha += "<div class='col-lg-3'>";
linha += "<div class='small-box bg-yellow'>";
linha += "<div class='inner'>";
linha += "</div>";
linha += "</div>";
linha += "<h2 style='margin-left: 2.5vw;'>" + temp.percentual + " %" + "</h2>";
linha += "<p style='color: black'>" + temp.dsNome + "</p>";
linha += "</div>";
}
linha += "</div>";
var html = document.getElementById('bolhas');
var box = document.getElementsByClassName('col-lg-12');
html.innerHTML = linha;
document.box.appendChild(html);
}
});
}
Finally, I do not know how to correct, if someone can guide me.