首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >Bootstrap表单设计问题

Bootstrap表单设计问题
EN

Stack Overflow用户
提问于 2015-10-09 04:02:10
回答 1查看 72关注 0票数 0

在我的bootstrap表单中,行之间有不寻常的间隙,尽管它们有相似的declarations.Also,选择框看起来比我在示例中看到的要大,

这就是问题所在

知道出什么问题了吗?

这是代码,

代码语言:javascript
复制
<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>

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

EN

回答 1

Stack Overflow用户

发布于 2015-10-09 04:05:24

也许是项目中的另一个CSS?

col sm中的行?

行中的行?

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/33024938

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档