Html 表单中的元素显示在彼此下方

我有一个问题，我已经问过了，但没有任何有用的结果

问题是我有一个带有表单元素的搜索过滤器，它包含几个元素，比如输入字段、复选框。我使用此表单筛选pdf报告的结果。我以前使用过Bootstrap3，所有元素都在一行中一个接一个地显示。如果有4个以上的元素，那么3个在一行，第4个在第2行，以此类推

我切换到Bootstrap 4，现在所有元素都显示在彼此下方，而不是一行。我不明白这个html视图有什么问题，因为它曾经在BTS3中工作过。以下是一些图片：

需要如何（在引导4之前）：

现在情况如何（使用Bootstrap 4-问题）：

HTML:

@SharedResources.Index.Report-@ViewBag.reportName




@SharedResources.Index.ReportDetails
@SharedResources.Index.ShowReport
@SharedResources.Index.ReportPreview

到目前为止，我所尝试的：

• 将“行”属性添加到“窗体组”的类中
• 使用“input holder”类删除“div”元素
• 将“form horizontal”替换为“form inline”

---

什么都没用。欢迎任何建议

您是否尝试过使用类容器在DIV内部内联使用类表单

OD
做

可能是

或更具体的

style=“width:100%”

导致此行为，因为它意味着“父元素的100%”，它可能会占用整个空间。只是猜测tho@D.Schaller宽度归因于其中一个输入元素，因此它无助于删除它。

<div class="wrapper">
<div id="data-container" class="form-horizontal details-content">
<div class="page-title  col-md-12">@SharedResources.Index.Report - @ViewBag.reportName</div>
<br />
<!-- left side -->

<div class="col-md-12" data-bind="if: editParameters() || showOpenFilterButton()">
  <br />

  <div class="card panel-info mb-4">
    <div class="card-header">
      <h6 class="card-title">
        <span>@SharedResources.Index.ReportDetails</span>
      </h6>
      <div id="grid-picker-resident" class="grid-picker" data-bind="visible: showOpenFilterButton()">
        <span class="pull-right fa fa-hand-o-down" style="margin-top:-15px;" title="@SharedResources.Index.ShowHideParameters" data-bind="click: showParameters"></span>
      </div>
    </div>
    <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' || DisplayMode() == 'DropdownMonths' || DisplayMode() == 'DropdownActive' || DisplayMode() == 'DropdownStatus' || DisplayMode() == 'DropdownsRequestType' || DisplayMode() == 'DropdownGender' || DisplayMode() == 'DropdownStatusActive'  || DisplayMode() == 'DropdownShifts' || DisplayMode() == 'DropdownRoomGroups') && !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' || DisplayMode() == 'DropdownMonths' || DisplayMode() == 'DropdownActive' || DisplayMode() == 'DropdownStatus' || DisplayMode() == 'DropdownsRequestType' || DisplayMode() == 'DropdownGender' || DisplayMode() == 'DropdownStatusActive'  || DisplayMode() == 'DropdownShifts' || DisplayMode() == 'DropdownRoomGroups') && 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>
<!-- ko if:  reportRequested() -->
<div class="col-md-12">
  <div class="card panel-info panel-samewidth mb-4">
    <div class="card-header">
      <h6 class="card-title">
        <span>@SharedResources.Index.ReportPreview</span>
      </h6>
    </div>
    <div id="reportPanel" class="card-body">
      <iframe id="reportPreview" src="" scrolling="yes" horizontalscrolling="no" verticalscrolling="yes" frameborder="0" style="position: relative; height: 100%; width: 100%" data-bind="event:{ load: reportLoaded }"></iframe>
    </div>
  </div>
</div>
<!-- /ko -->