堆栈内存溢出
  简体   繁体   English

div中彼此相邻的元素

[英]Elements next to each other in div

 原文  2018-09-04 07:10:11  3   2    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>

I have a div that contains input elements like text fields, datepickers, dropdown lists, etc. It's all located inside one div that has 'row' class. 我有一个div，其中包含文本字段，日期选择器，下拉列表等输入元素。它们全部位于具有“ row”类的一个div中。 However, all the elements are shown below each other and I want them to be next to each other. 但是，所有元素都显示在彼此下面，我希望它们彼此相邻。 How could I achieve this? 我怎样才能做到这一点？ Do I need to wrap each element inside a separate div and give it 'row' class? 我是否需要将每个元素包装在单独的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>

Pic of problem: 问题图片：

在此处输入图片说明

2 个解决方案

解决方案1
 2  2018-09-04 07:17:08

You should wrap each element inside a div and give that div class "col". 您应该将每个元素包装在div中，并给该div类“ col”。 See below: 见下文： 

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

Or modify the html as per https://getbootstrap.com/docs/4.0/components/forms/#inline-forms . 或按照https://getbootstrap.com/docs/4.0/components/forms/#inline-forms修改html。 Bootstrap has form-inline component too. Bootstrap也具有表单内联组件。

解决方案2
 0  2018-09-04 07:41:25

You can optionally make . 您可以选择制作。 form-group.row a flexbox. 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>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 将图像和Div元素彼此相邻放置？ - Placing Images and Div Elements Next to Each Other? 彼此相邻的圈DIV元素 - Circle DIV elements next to each other 如何将 div 元素彼此相邻放置？ - How to Place div elements next to each other? 相邻显示Div元素 - Displaying Div Elements next to each other 将div元素在下一个和另一个下方对齐 - Align div elements next and under each other 彼此相邻2格 - 2 div next to each other 将四个元素并排放置在 div 中，宽度不同 - Place four elements inside div next to each other, with different widths 没有包装div的情况下将元素并排放置 - Placing elements next to each other without wrapper div 如何在位置：固定的情况下彼此相邻显示4个div元素？ - How to display 4 div elements next to each other while position: fixed? 将div元素彼此相邻并居中 - Put div elements next to each other and center them
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM