Question

我在田野前面临长期差距。第一行很好但第二行有很长的间隙。此外，所有行应该看起来像第一行。谢谢

查看图片以获得问题的真实视图

这是代码。

                <div class="col-xs-12">
                    <!-- PAGE CONTENT BEGINS -->

                    <form action="http://localhost/CI/Products/manageIpo" class="form-horizontal" role="form" enctype="multipart/form-data" method="post" accept-charset="utf-8">
                    <input type="hidden" name="dataid" value="">

                        <div class="form-group col-lg-4">
                            <label class="col-lg-12" for="form-field-1"> POD Request Number </label>

                            <div class="col-lg-12">
                                <input type="text" name="ipo_request_no" value="" id="ipo_request_no" class="col-lg-10" placeholder="IPO Request Number"  />
                            </div>
                        </div>
                        <div class="form-group col-lg-4">
                            <label class="col-sm-12" for="form-field-1"> DN Number </label>

                            <div class="col-sm-12">
                                <input type="text" name="dn_number" value="" id="dn_number" class="col-lg-10" placeholder="DN Number"  />
                            </div>
                        </div>
                        <div class="form-group col-lg-4">
                            <label class="col-lg-12" for="form-field-1"> Job Type</label>

                            <div class="col-lg-12">
                                <select id="ipo_type" class="col-lg-10" 

name="ipo_type">
<option value="3">Transportation</option>
<option value="4">Reverse Transportation</option>
</select>
                            </div>
                        </div>
                        <div class="form-group col-lg-4">
                            <label class="col-lg-12" for="form-field-1"> Warehouse</label>

                            <div class="col-lg-12">
                               <select id="warehouse_id" class="col-lg-10" 

name="warehouse_id">
<option value="1">Wah</option>
<option value="2">Warid</option>
<option value="3">Zong  1</option>
<option value="4">Test Approved</option>
<option value="5">Mobilnk</option>
</select>
                            </div>
                        </div>
                        <div class="form-group col-lg-4">
                            <label class="col-lg-12" for="form-field-1"> Vendor</label>

                            <div class="col-lg-12">
                                <select id="supplier_id" class="col-lg-10" 

name="supplier_id">
<option value="1">Spine engineering</option>
</select>
                            </div>
                        </div>
                        <div class="form-group col-lg-4">
                            <label class="col-lg-12" for="form-field-1"> Project</label>

                            <div class="col-lg-12">
                                <select id="project_id_ipo" class="col-lg-

10" name="project_id">
<option value="1">CM Pak Wireless Optimization</option>
<option value="2">Mobilink Mega  2014 </option>
<option value="3">Mobilink Mega  2015 </option>
<option value="4">Mobilink Mega  2013 </option>
</select>
                            </div>
                        </div>
                        <div class="form-group col-lg-4">
                            <label class="col-lg-12" for="form-field-1">             Project Externel Code </label>

                            <div class="col-lg-12">
                                <input type="text" name="project_externel_code" value="" id="project_externel_code" class="col-lg-10" placeholder="Project Externel Code" disabled="disabled"  />
                            </div>
                        </div>

                        <div class="form-group col-lg-4">
                            <label class="col-lg-12" for="form-field-1"> RSD Date </label>
                            <div class="">
                                <div class="col-lg-12">
                                    <div class="input-group">
                                        <input class="form-control date-picker col-lg-10" name="rsd" id="id-date-picker-1" type="text" data-date-format="dd-mm-yyyy" />
                                        <span class="input-group-addon">
                                            <i class="fa fa-calendar bigger-110"></i>
                                        </span>
                                    </div>
                                </div>
                            </div>

                        </div>
                        <div class="form-group col-lg-4">
                            <label class="col-lg-12" for="form-field-1"> RAD Date </label>
                            <div class="">
                                <div class="col-lg-12">
                                    <div class="input-group col-lg-10">
                                        <input class="form-control date-picker" name="rad" id="id-date-picker-2" type="text" data-date-format="dd-mm-yyyy" />
                                        <span class="input-group-addon">
                                            <i class="fa fa-calendar bigger-110"></i>
                                        </span>
                                    </div>
                                </div>
                            </div>

                        </div>
                        <div class="form-group col-lg-4">
                             <label class="col-lg-12" for="form-field-1"> Site</label>

                             <div class="col-lg-12">
                                 <select id="site_id" class="col-lg-10" 

name="site_id">
<option value="0">Select Site</option>
<option value="1">Site 2</option>
<option value="2">Site 1</option>
<option value="3">Site 3</option>
<option value="4">Site 4</option>
</select>
                             </div>
                         </div>
                        <div class="form-group col-lg-4">
                             <label class="col-lg-12" for="form-field-1"> Region</label>

                             <div class="col-lg-12">
                                 <select id="region_id" class="col-lg-10" 

name="region_id">
<option value="1">South</option>
<option value="2">East</option>
<option value="3">North</option>
<option value="4">West</option>
</select>
                             </div>
                         </div>
                        <div class="row col-lg-12">
                            <div class="form-group col-xs-6">
                                <label class="col-lg-12 center" for="form-field-2">POD Attachment</label>
                                <div class="col-lg-12">
                                    <input multiple="" type="file" name="other_attach"  id="id-input-file-5" />
                                </div>
                            </div> 
                            <div class="form-group col-xs-6">
                                <label class="col-lg-12 center" for="form-field-1">Signed Attachment</label>
                                <div class="col-lg-12">
                                    <input multiple="" type="file" name="signed_attach"  id="id-input-file-4" />
                                </div>
                            </div>

                        </div>

                        <div class="modal-footer col-lg-12">


                            <button type="submit" class="btn btn-sm btn-primary">
                                <i class="ace-icon fa fa-check"></i>
                                Save                                </button>
                        </div>
                    </form>                    </div>
            </div>

Answer 1

您应该包含一个带class="row"的div来连续设置这些元素，

<div class="row">
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

请参阅Grid system in Bootstrap了解详情。

试试以下代码，

<form action="http://localhost/CI/Products/manageIpo" class="form-horizontal" role="form" enctype="multipart/form-data"
      method="post" accept-charset="utf-8">
    <input type="hidden" name="dataid" value="">

    <div class="row">
        <div class="form-group col-lg-4">
            <label class="col-lg-12" for="form-field-1"> POD Request Number </label>

            <div class="col-lg-12">
                <input type="text" name="ipo_request_no" value="" id="ipo_request_no" class="col-lg-10"
                       placeholder="IPO Request Number">
            </div>
        </div>
        <div class="form-group col-lg-4">
            <label class="col-sm-12" for="form-field-1"> DN Number </label>

            <div class="col-sm-12">
                <input type="text" name="dn_number" value="" id="dn_number" class="col-lg-10" placeholder="DN Number">
            </div>
        </div>
        <div class="form-group col-lg-4">
            <label class="col-lg-12" for="form-field-1"> Job Type</label>

            <div class="col-lg-12">
                <select id="ipo_type" class="col-lg-10" name="ipo_type">
                    <option value="3">Transportation</option>
                    <option value="4">Reverse Transportation</option>
                </select>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="form-group col-lg-4">
            <label class="col-lg-12" for="form-field-1"> Warehouse</label>

            <div class="col-lg-12">
                <select id="warehouse_id" class="col-lg-10" name="warehouse_id">
                    <option value="1">Wah</option>
                    <option value="2">Warid</option>
                    <option value="3">Zong 1</option>
                    <option value="4">Test Approved</option>
                    <option value="5">Mobilnk</option>
                </select>
            </div>
        </div>
        <div class="form-group col-lg-4">
            <label class="col-lg-12" for="form-field-1"> Vendor</label>

            <div class="col-lg-12">
                <select id="supplier_id" class="col-lg-10" name="supplier_id">
                    <option value="1">Spine engineering</option>
                </select>
            </div>
        </div>
        <div class="form-group col-lg-4">
            <label class="col-lg-12" for="form-field-1"> Project</label>

            <div class="col-lg-12">
                <select id="project_id_ipo" class="col-lg-

10" name="project_id">
                    <option value="1">CM Pak Wireless Optimization</option>
                    <option value="2">Mobilink Mega 2014</option>
                    <option value="3">Mobilink Mega 2015</option>
                    <option value="4">Mobilink Mega 2013</option>
                </select>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="form-group col-lg-4">
            <label class="col-lg-12" for="form-field-1"> Project Externel Code </label>

            <div class="col-lg-12">
                <input type="text" name="project_externel_code" value="" id="project_externel_code" class="col-lg-10"
                       placeholder="Project Externel Code" disabled="disabled">
            </div>
        </div>

        <div class="form-group col-lg-4">
            <label class="col-lg-12" for="form-field-1"> RSD Date </label>

            <div class="">
                <div class="col-lg-12">
                    <div class="input-group">
                        <input class="form-control date-picker col-lg-10" name="rsd" id="id-date-picker-1" type="text"
                               data-date-format="dd-mm-yyyy">
                                        <span class="input-group-addon">
                                            <i class="fa fa-calendar bigger-110"></i>
                                        </span>
                    </div>
                </div>
            </div>

        </div>
        <div class="form-group col-lg-4">
            <label class="col-lg-12" for="form-field-1"> RAD Date </label>

            <div class="">
                <div class="col-lg-12">
                    <div class="input-group col-lg-10">
                        <input class="form-control date-picker" name="rad" id="id-date-picker-2" type="text"
                               data-date-format="dd-mm-yyyy">
                                        <span class="input-group-addon">
                                            <i class="fa fa-calendar bigger-110"></i>
                                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="form-group col-lg-4">
            <label class="col-lg-12" for="form-field-1"> Site</label>

            <div class="col-lg-12">
                <select id="site_id" class="col-lg-10" name="site_id">
                    <option value="0">Select Site</option>
                    <option value="1">Site 2</option>
                    <option value="2">Site 1</option>
                    <option value="3">Site 3</option>
                    <option value="4">Site 4</option>
                </select>
            </div>
        </div>
        <div class="form-group col-lg-4">
            <label class="col-lg-12" for="form-field-1"> Region</label>

            <div class="col-lg-12">
                <select id="region_id" class="col-lg-10" name="region_id">
                    <option value="1">South</option>
                    <option value="2">East</option>
                    <option value="3">North</option>
                    <option value="4">West</option>
                </select>
            </div>
        </div>
    </div>
    <div class="row col-lg-12">
        <div class="form-group col-xs-6">
            <label class="col-lg-12 center" for="form-field-2">POD Attachment</label>

            <div class="col-lg-12">
                <input multiple="" type="file" name="other_attach" id="id-input-file-5">
            </div>
        </div>
        <div class="form-group col-xs-6">
            <label class="col-lg-12 center" for="form-field-1">Signed Attachment</label>

            <div class="col-lg-12">
                <input multiple="" type="file" name="signed_attach" id="id-input-file-4">
            </div>
        </div>

    </div>

    <div class="modal-footer col-lg-12">


        <button type="submit" class="btn btn-sm btn-primary">
            <i class="ace-icon fa fa-check"></i>
            Save
        </button>
    </div>
</form>

Answer 2

具有高度的前两个块多于选择框的最后一个块。所以你错过了将class="form-control"放在选择框中。

引导网格列之间的长距离

2 个答案: