Bootstrap表单设计问题

时间:2015-10-08 20:02:10

标签: bootstrap-modal

在我的引导程序表单中,行之间存在不寻常的间隙,尽管它们具有相似的声明。此外,选择框看起来比我在示例中看到的要大,

这是问题,

enter image description here

知道什么是错的吗?

这是代码,

<div class="panel-body">
                <div class="tab-content">
                        <div id="content_obsinfo" class="tab-pane active">
                            <div class="col-sm-12">
                                <div class="row">
                                    <div class="panel-body form-horizontal form-padding">
                                        <div class="form-group">
                                             <!-- BEGIN: Logged By Name -->
                                        <div class="col-sm-2">
                                            <label for="pro_LoggedByName" class="col-sm-12 control-label">Logged by name</label>
                                        </div>
                                           <div class="col-sm-4">
                                              <input type="text" class="form-control" id="pro_LoggedByName" name="pro_LoggedByName" value=""    >                                             </div>
                                           <!-- END: Logged By Name-->
                                           <!-- BEGIN: Manager-->
                                        <div class="col-sm-2">
                                            <label for="top_Manager" class="col-sm-12 control-label">Manager</label>
                                        </div>
                                        <div class="col-sm-4">
                                             <div class="radio">
                                                <label class="form-radio form-normal form-text form-success "><input type="radio" name="top_Manager"   value="Yes">Yes</label><label class="form-radio form-normal form-text form-success "><input type="radio" name="top_Manager"   value="No">No</label>
                                             </div>
                                        </div>
                                          <!-- END: Manager-->
                                          </div>
                                      </div>
                                    </div> <!-- End of row 1 -->
                                   <div class="row">
                                    <div class="panel-body form-horizontal ">
                                        <div class="form-group">
                                             <!-- BEGIN: Conducted On -->
                                        <div class="col-sm-2">
                                            <label for="pro_ConductedOn" class="col-sm-12 control-label">Conducted on</label>
                                        </div>
                                           <div class="col-sm-4">
                                            <div class="input-group date" id="conductedon">
                                                 <input type="text" class="form-control" id="pro_ConductedOn" name="pro_ConductedOn" value="8-Oct-2015"   >
                                                    <span class="input-group-addon">
                                                        <i class="fa fa-calendar fa-lg" title="Open Calendar"></i>
                                                    </span>
                                            </div>
                                           </div>
                                           <!-- END: Conducted On -->
                                           <!-- BEGIN: Employed By-->
                                        <div class="col-sm-2">
                                            <label for="top_EmployedBy" class="col-sm-12 control-label">Employed by</label>
                                        </div>
                                        <div class="col-sm-4">
                                                <select  data-placeholder="Select employed by" id="top_EmployedBy" name="top_EmployedBy" class="chosen-select"  >
                                                    <option value=""></option><option  value="Company">Company</option><option  value="Maritime">Maritime</option><option  value="Other">Other</option><option  value="Subcontractor">Subcontractor</option><option  value="Third party">Third party</option>
                                                </select>
                                        </div>
                                          <!-- END: Employed By-->
                                          </div>
                                      </div>
                                    </div> <!-- End of row 2 -->
                                   <div class="row">
                                    <div class="panel-body form-horizontal ">
                                        <div class="form-group">
                                             <!-- BEGIN: Confidentiality   -->
                                        <div class="col-sm-2">
                                            <label for="pro_Confidentiality" class="col-sm-12 control-label">Confidentiality</label>
                                        </div>
                                           <div class="col-sm-4">
                                                  <div class="radio">
                                                <label class="form-radio form-normal form-text form-success "><input type="radio" name="pro_Confidentiality"   value="Public">Public</label><label class="form-radio form-normal form-text form-success "><input type="radio" name="pro_Confidentiality"   value="Private">Private</label>
                                                  </div>
                                           </div>
                                           <!-- END: Confidentiality   -->
                                           <!-- BEGIN: Job Position-->
                                        <div class="col-sm-2">
                                            <label for="top_JobPosition" class="col-sm-12 control-label">Job position</label>
                                        </div>
                                        <div class="col-sm-4">
                                        <select  data-placeholder="Select Job position" id="top_JobPosition" name="top_JobPosition" class="chosen-select"  >
                                             <option value=""></option><option  value="Administration">Administration</option><option  value="Catering">Catering</option><option  value="Client">Client</option><option  value="Communication">Communication</option><option  value="Deck hand">Deck hand</option><option  value="Deck office">Deck office</option><option  value="Drivers">Drivers</option><option  value="Engineer / electrician">Engineer / electrician</option><option  value="Gun mechanic">Gun mechanic</option><option  value="Laborers">Laborers</option><option  value="Maintenance">Maintenance</option><option  value="Management">Management</option><option  value="Mechanic">Mechanic</option><option  value="Navigator">Navigator</option><option  value="Observer">Observer</option><option  value="Other">Other</option><option  value="Pilot / aviator">Pilot / aviator</option><option  value="Processing">Processing</option><option  value="Safety - HSE / medic">Safety - HSE / medic</option><option  value="Shore">Shore</option><option  value="Subcontractor">Subcontractor</option><option  value="Support vessel crew">Support vessel crew</option><option  value="Technician">Technician</option>
                                        </select>
                                        </div>
                                          <!-- END: Job Position-->
                                          </div>
                                      </div>
                                    </div> <!-- End of row 3 -->
                            </div>
                       </div>
        </div>
        </div>

当我检查第一行和第二行时,清楚地看到差异

enter image description here enter image description here

1 个答案:

答案 0 :(得分:0)

项目中的另一个CSS可能吗?

在col-sm里面排?

排在行内?