Как добавить столбцы Bootstrap в селектора JQuery

Question

У меня есть следующий код, и я хочу добавить столбцы Bootstrap в dataSelected и dataOptionSelected, чтобы между ними был правильный интервал. Как мне это сделать?

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

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

newDataRow.innerHTML = dataSelected + " " + dataOptionSelected; 

Answer 1

Просто обернуть детали с начальной загрузки строки и их столбцы, вложенные в следующим образом:

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

Answer 2

Вы можете добавить любой класс к элементу с помощью функции addClass, например:

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

Функция addClass может занять несколько классов разделенных запятой. Для получения дополнительной информации обратитесь к следующим образом: https://api.jquery.com/addclass/

Answer 3

Вы можете обернуть newDataRow в DIV с начальной загрузки строк и столбцов структуры, как ниже:

// 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>';