Question

我遇到了一个已经问过的问题，但没有任何有益的结果。

问题是我有一个带有表单元素的搜索过滤器，其中包含几个元素，例如输入字段，复选框。我使用此表格来过滤pdf报告的结果。我以前使用过Bootstrap 3，所有元素都一行一行地显示。如果元素多于4个，则3个在一行中，第4个在第二行中，依此类推。

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

需要如何（在Bootstrap 4之前）：

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

HTML：

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

到目前为止，我已经尝试过：

将“行”属性添加到“表单组”的类中
使用“ input-holder”类删除“ div”元素
用“ form-inline”替换“ form-horizontal”

没有任何效果。欢迎任何建议！

Answer 1

您是否在带有类容器的DIV中使用类form-inline尝试过FORM？

<div class="container">
  <div class="row">
    <form class="form-inline">
      <div class="form-group col-md-6">
        <div class="input-group">
          <span class="input-group-addon">OD</span><input type="number" class="form-control" /><span class="input-group-addon"></span>                  
         <span class="input-group-addon">DO</span><input type="number" class="form-control" /><span class="input-group-addon"></span>
         </div>
      </div>
    </form>
  </div>
</div>

元素形式彼此下方显示

1 个答案: