Элементы рядом друг с другом в div

Question

<div class="card-body" data-bind="if :showParam() || editParameters() ">
                <form class="col-lg-12 col-md-12 col-sm-12 form-horizontal" data-bind="submit: submitReportData">
                    <div id="input-holder" data-bind="foreach:mainData">
                        <div class="col-lg-4 col-md-6 col-sm-6 col-xs-12">
                            <div style="padding-left:5px;padding-right:5px;" class="form-group row">
                                <label class="control-label" data-bind="text: DisplayText, attr : {'for' : Name}"></label>
                                <!-- ko if:  DisplayMode() == 'Input' -->
                                <input style="width:100%" type="text" data-bind="value: Value" class="form-control input-sm">
                                <!-- /ko -->
                                <!-- ko if:  DisplayMode() == 'Checkbox' -->
                                <input type="checkbox" data-bind="checked: Value" class="checkbox input-sm">
                                <!-- /ko -->
                                <!-- ko if:  DisplayMode() == 'Dropdown' && !MultiValue() -->
                                <select data-bind="options: ParameterOptions, optionsValue: 'value', optionsText: 'label', value: Value, validationElement: Value" class="form-control input-sm"></select>
                                <!-- /ko -->
                                <!-- ko if:  DisplayMode() == 'Dropdown' && MultiValue() -->
                                <select data-bind="options: ParameterOptions, optionsValue: 'value', optionsText: 'label', selectedOptions: Value, validationElement: Value" multiple style="height:150px !important;" class="form-control input-sm"></select>
                                <!-- /ko -->
                                <!-- ko if:  DisplayMode() == 'AutoComplete' -->
                                <input type="text" data-bind="validationElement: Value, attr : {'id':'autocomplete_' + Name()}" placeholder="@SharedResources.Index.AutocompleteMessage" class="form-control input-sm">
                                <!-- /ko -->
                                <!-- ko if:  DisplayMode() == 'DatePicker' -->
                                <input type="text" data-bind="datePicker: Value, attr:{'id': Name() }, validationElement: Value" class="form-control input-sm">
                                <!-- /ko -->
                                <!-- ko if:  DisplayMode() == 'DateTimePicker' -->
                                <input type="text" data-bind="dateTimePicker: Value, attr:{'id': Name() }, validationElement: Value" class="form-control input-sm">
                                <!-- /ko -->
                                <!-- ko if:  DisplayMode() == 'TimePicker' -->
                                <input type="text" data-bind="timePicker: Value, attr:{'id': Name() }, validationElement: Value" class="form-control input-sm">
                                <!-- /ko -->
                            </div>
                        </div>
                    </div>
                    <button type="submit" style="margin:20px !important;" class="btn pull-right" id="generateReport"><em class="fa fa-repeat"></em> @SharedResources.Index.ShowReport</button>
                </form>
            </div>

У меня есть div, который содержит элементы ввода, такие как текстовые поля, указатели даты, выпадающие списки и т. Д. Он находится внутри одного div, который имеет класс 'row'. Однако все элементы показаны ниже друг друга, и я хочу, чтобы они были рядом друг с другом. Как я мог этого добиться? Нужно ли мне оборачивать каждый элемент внутри отдельного элемента div и назначать ему класс 'row'?

<div class="card-body" data-bind="if :showParam() || editParameters() ">
                <form class="col-lg-12 col-md-12 col-sm-12 form-horizontal" data-bind="submit: submitReportData">
                    <div id="input-holder" data-bind="foreach:mainData">
                        <div class="col-lg-4 col-md-6 col-sm-6 col-xs-12">
                            <div style="padding-left:5px;padding-right:5px;" class="form-group row">
                                <label class="control-label" data-bind="text: DisplayText, attr : {'for' : Name}"></label>
                                <!-- ko if:  DisplayMode() == 'Input' -->
                                <input style="width:100%" type="text" data-bind="value: Value" class="form-control input-sm">
                                <!-- /ko -->
                                <!-- ko if:  DisplayMode() == 'Checkbox' -->
                                <input type="checkbox" data-bind="checked: Value" class="checkbox input-sm">
                                <!-- /ko -->
                                <!-- ko if:  DisplayMode() == 'Dropdown' && !MultiValue() -->
                                <select data-bind="options: ParameterOptions, optionsValue: 'value', optionsText: 'label', value: Value, validationElement: Value" class="form-control input-sm"></select>
                                <!-- /ko -->
                                <!-- ko if:  DisplayMode() == 'Dropdown' && MultiValue() -->
                                <select data-bind="options: ParameterOptions, optionsValue: 'value', optionsText: 'label', selectedOptions: Value, validationElement: Value" multiple style="height:150px !important;" class="form-control input-sm"></select>
                                <!-- /ko -->
                                <!-- ko if:  DisplayMode() == 'AutoComplete' -->
                                <input type="text" data-bind="validationElement: Value, attr : {'id':'autocomplete_' + Name()}" placeholder="@SharedResources.Index.AutocompleteMessage" class="form-control input-sm">
                                <!-- /ko -->
                                <!-- ko if:  DisplayMode() == 'DatePicker' -->
                                <input type="text" data-bind="datePicker: Value, attr:{'id': Name() }, validationElement: Value" class="form-control input-sm">
                                <!-- /ko -->
                                <!-- ko if:  DisplayMode() == 'DateTimePicker' -->
                                <input type="text" data-bind="dateTimePicker: Value, attr:{'id': Name() }, validationElement: Value" class="form-control input-sm">
                                <!-- /ko -->
                                <!-- ko if:  DisplayMode() == 'TimePicker' -->
                                <input type="text" data-bind="timePicker: Value, attr:{'id': Name() }, validationElement: Value" class="form-control input-sm">
                                <!-- /ko -->
                            </div>
                        </div>
                    </div>
                    <button type="submit" style="margin:20px !important;" class="btn pull-right" id="generateReport"><em class="fa fa-repeat"></em> @SharedResources.Index.ShowReport</button>
                </form>
            </div>

Рис. Проблемы:

Answer 1

При желании вы можете сделать. form-group.row flexbox.

.form-group.row {
  display: flex;
}

<div class="card-body" data-bind="if :showParam() || editParameters() ">
  <form class="col-lg-12 col-md-12 col-sm-12 form-horizontal" data-bind="submit: submitReportData">
    <div id="input-holder" data-bind="foreach:mainData">
      <div class="col-lg-4 col-md-6 col-sm-6 col-xs-12">
        <div style="padding-left:5px;padding-right:5px;" class="form-group row">
          <label class="control-label" data-bind="text: DisplayText, attr : {'for' : Name}"></label>
          <!-- ko if:  DisplayMode() == 'Input' -->
          <input style="width:100%" type="text" data-bind="value: Value" class="form-control input-sm">
          <!-- /ko -->
          <!-- ko if:  DisplayMode() == 'Checkbox' -->
          <input type="checkbox" data-bind="checked: Value" class="checkbox input-sm">
          <!-- /ko -->
          <!-- ko if:  DisplayMode() == 'Dropdown' && !MultiValue() -->
          <select data-bind="options: ParameterOptions, optionsValue: 'value', optionsText: 'label', value: Value, validationElement: Value" class="form-control input-sm"></select>
          <!-- /ko -->
          <!-- ko if:  DisplayMode() == 'Dropdown' && MultiValue() -->
          <select data-bind="options: ParameterOptions, optionsValue: 'value', optionsText: 'label', selectedOptions: Value, validationElement: Value" multiple style="height:150px !important;" class="form-control input-sm"></select>
          <!-- /ko -->
          <!-- ko if:  DisplayMode() == 'AutoComplete' -->
          <input type="text" data-bind="validationElement: Value, attr : {'id':'autocomplete_' + Name()}" placeholder="@SharedResources.Index.AutocompleteMessage" class="form-control input-sm">
          <!-- /ko -->
          <!-- ko if:  DisplayMode() == 'DatePicker' -->
          <input type="text" data-bind="datePicker: Value, attr:{'id': Name() }, validationElement: Value" class="form-control input-sm">
          <!-- /ko -->
          <!-- ko if:  DisplayMode() == 'DateTimePicker' -->
          <input type="text" data-bind="dateTimePicker: Value, attr:{'id': Name() }, validationElement: Value" class="form-control input-sm">
          <!-- /ko -->
          <!-- ko if:  DisplayMode() == 'TimePicker' -->
          <input type="text" data-bind="timePicker: Value, attr:{'id': Name() }, validationElement: Value" class="form-control input-sm">
          <!-- /ko -->
        </div>
      </div>
    </div>
    <button type="submit" style="margin:20px !important;" class="btn pull-right" id="generateReport"><em class="fa fa-repeat"></em> @SharedResources.Index.ShowReport</button>
  </form>
</div>

Answer 2

Вы должны обернуть каждый элемент внутри div и дать этому классу div "col". Смотрите ниже:

      <div class="card-body" data-bind="if :showParam() || editParameters() ">
    <form class="col-lg-12 col-md-12 col-sm-12 form-horizontal" data-bind="submit: submitReportData">
      <div id="input-holder" data-bind="foreach:mainData">
        <div class="col-lg-4 col-md-6 col-sm-6 col-xs-12">
          <div class="form-group row">
            <label class="col control-label" data-bind="text: DisplayText, attr : {'for' : Name}"></label>
            <!-- ko if:  DisplayMode() == 'Input' -->
            <input type="text" data-bind="value: Value" class="col form-control input-sm">
            <!-- /ko -->
            <!-- ko if:  DisplayMode() == 'Checkbox' -->
            <input type="checkbox" data-bind="checked: Value" class="col checkbox input-sm">
            <!-- /ko -->
            <!-- ko if:  DisplayMode() == 'Dropdown' && !MultiValue() -->
            <select data-bind="options: ParameterOptions, optionsValue: 'value', optionsText: 'label', value: Value, validationElement: Value" class="form-control input-sm col"></select>
            <!-- /ko -->
            <!-- ko if:  DisplayMode() == 'Dropdown' && MultiValue() -->
            <select data-bind="options: ParameterOptions, optionsValue: 'value', optionsText: 'label', selectedOptions: Value, validationElement: Value" multiple style="height:150px !important;" class="col form-control input-sm"></select>
            <!-- /ko -->
            <!-- ko if:  DisplayMode() == 'AutoComplete' -->
            <input type="text" data-bind="validationElement: Value, attr : {'id':'autocomplete_' + Name()}" placeholder="@SharedResources.Index.AutocompleteMessage" class="form-control input-sm col">
            <!-- /ko -->
            <!-- ko if:  DisplayMode() == 'DatePicker' -->
            <input type="text" data-bind="datePicker: Value, attr:{'id': Name() }, validationElement: Value" class="form-control input-sm col">
            <!-- /ko -->
            <!-- ko if:  DisplayMode() == 'DateTimePicker' -->
            <input type="text" data-bind="dateTimePicker: Value, attr:{'id': Name() }, validationElement: Value" class="form-control input-sm col">
            <!-- /ko -->
            <!-- ko if:  DisplayMode() == 'TimePicker' -->
            <input type="text" data-bind="timePicker: Value, attr:{'id': Name() }, validationElement: Value" class="form-control input-sm col">
            <!-- /ko -->
          </div>
        </div>
      </div>
      <button type="submit" style="margin:20px !important;" class="btn pull-right" id="generateReport"><em class="fa fa-repeat"></em> @SharedResources.Index.ShowReport</button>
    </form>
  </div>

Или измените HTML согласно https://getbootstrap.com/docs/4.0/components/forms/#inline-forms. Bootstrap также имеет встроенный компонент формы.