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，其中包含文本字段，日期选择器，下拉列表等输入元素。它们全部位于具有“ row”类的一个div中。 但是，所有元素都显示在彼此下面，我希望它们彼此相邻。 我怎样才能做到这一点？ 我是否需要将每个元素包装在单独的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

您应该将每个元素包装在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>

或按照https://getbootstrap.com/docs/4.0/components/forms/#inline-forms修改html。 Bootstrap也具有表单内联组件。

Answer 2

您可以选择制作。 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>