div中彼此相邻的元素

时间：2018-09-04 07:10:11

标签： html css bootstrap-4 

<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>

问题所在：

enter image description here

2 个答案:

答案 0 :(得分：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>

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

答案 1 :(得分：0)

您可以选择将。form-group.row设为弹性框。

.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>

相关问题
最新问题