So fügen Sie Bootstrap-Spalten zu JQuery-Selektoren hinzu

Question

Ich habe den folgenden Code, und ich möchte Bootstrap-Spalten zu dataSelected und dataOptionSelected hinzufügen, so dass der richtige Abstand zwischen ihnen ist. Wie gehe ich dabei vor?

// col-md-7 
var dataSelected = $("#dataPicker option:selected").val(); 

// col-md-5 
var dataOptionSelected = $("#dataOptionPicker option:selected").val(); 

newDataRow.innerHTML = dataSelected + " " + dataOptionSelected; 

Answer 1

einfach die Details mit einer Bootstrap-Reihe wickeln und ihre Spalten verschachtelt innerhalb wie folgt:

newDataRow.innerHTML = "<div class='row'><div class='col-md-7'>" 
+ dataSelected + "</div><div class='col-md-5'>" 
+ dataOptionSelected + "</div></div>"; 

Answer 2

Sie können jede Klasse auf ein Element hinzufügen, mit der addClass Funktion, zum Beispiel:

$('#dataOptionPicker').addClass('col-md-4'); 

Die addClass Funktion kann durch ein Komma getrennt mehrere Klassen nehmen. Weitere Informationen dazu finden Sie: https://api.jquery.com/addclass/

Answer 3

Sie können newDataRow in einem div mit Bootstrap-Reihe einpacken und Spalten Struktur wie unten:

// col-md-7 
var dataSelected = $('#dataPicker option:selected').val(); 

// col-md-5 
var dataOptionSelected = $('#dataOptionPicker option:selected').val(); 

newDataRow.innerHTML = '<div class="row"><div class="col-md-7">' + dataSelected + '</div><div class="col-md-5">' + dataOptionSelected + '</div></div>';