大佬教程收集整理的这篇文章主要介绍了html – form-inline导致各个表单组件重叠 – bootstrap 3,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
请参阅附件截图.如你所见,我有两个问题.第一个易于识别的是,在“体验”部分 – 这是嵌套在表单组中的内联表单,问题是重叠字段.理想情况下,它们应该彼此相邻,它们之间有10px的缓冲区.本节的代码如下
<div class="form-group row-top-buffer"> <label for="experience" class="col-md-3 control-label">Experience</label> <div class="col-md-9 form-inline" role="form"> <div class="form-group col-md-3"> <label class="sr-only" for="jobMinExperience">Min Experience</label> <input type="text" class="form-control" id="jobMinExperience" placeholder="0" /> </div> <div class="form-group col-md-3"> <label class="sr-only" for="jobMaxExperience">Max Experience</label> <input type="text" class="form-control" id="jobMaxExperience" placeholder="0" /> </div> <div class="form-group col-md-3"> <label class="sr-only" for="jobExperienceDropDown">Experience</label> <div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="jobExperienceDropDown" data-toggle="dropdown"> Dropdown <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu" aria-labelledby="jobExperienceDropDown"> <li role="presentation"> <a role="menuitem" tabindex="-1" href="#">years</a> </li> <li role="presentation"> <a role="menuitem" tabindex="-1" href="#">months</a> </li> </ul> </div> </div> </div> </div>
第二个问题不明显,就是“位置”行中的问题.我有两排组件.第一个是简单的全角文本输入.然而,第二行是包括多个组件的内联形式.在这里,我希望最后一个文本框,对于邮政编码,可以延伸到第一行结束 – 但它会突然停止.下面提供了此部分的代码
<div class="form-group row-top-buffer"> <label for="jobLocation" class="col-md-3 control-label">Location</label> <div class="col-md-9"> <input type="text" class="form-control" id="jobStreet" name="jobStreet" placeholder="Street" /> <div class="form-inline" role="form" style="padding-top: 9px;"> <div class="form-group col-md-5"> <label class="sr-only" for="jobCity">City</label> <input type="text" class="form-control" id="jobCity" name="jobCity" placeholder="City" /> </div> <div class="form-group col-md-2 margin-0"> <label class="sr-only" for="jobState">State</label> <? include_once 'stateDropDown.php'; ?> </div> <div class="form-group col-md-3 margin-0"> <label class="sr-only" for="jobZip">City</label> <input type="text" class="form-control" id="jobZip" name="jobZip" placeholder="00000" /> </div> </div> </div> </div>
演示:http://jsbin.com/fecib/2/edit
<form class="form-horizontal my-form" role="form"> <div class="form-group"> <label class="col-sm-3 control-label">Location</label> <div class="col-sm-9"> <input type="text" class="form-control" placeholder="location"> </div><!-- /col-sm-9 --> </div><!-- /form-group --> <div class="form-group"> <div class="col-sm-offset-3 col-sm-9"> <div class="form-group"> <!-- nested form-group acting like row --> <div class="col-sm-6"> <input type="text" class="form-control" placeholder="City"> </div><!-- /col-sm-6 --> <div class="col-sm-4"> <input type="text" class="form-control" placeholder="State"> </div><!-- /col-sm-4 --> <div class="col-sm-2"> <input type="text" class="form-control" placeholder="Zip"> </div><!-- /col-sm-2 --> </div> <!-- /nested form-group acting like row --> </div><!-- /col-sm-offset-3 col-sm-9 --> </div><!-- /form-group --> <div class="form-group"> <label for="location" class="col-sm-3 control-label">Priority</label> <div class="col-sm-9"> <div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="jobExperienceDropDown" data-toggle="dropdown"> Dropdown <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu" aria-labelledby="jobExperienceDropDown"> <li role="presentation"> <a role="menuitem" tabindex="-1" href="#">years</a> </li> <li role="presentation"> <a role="menuitem" tabindex="-1" href="#">months</a> </li> </ul> </div><!-- /dropdown --> </div><!-- /col-sm-9--> </div><!-- /form-group --> <div class="form-group"> <label class="col-sm-3 control-label">Experience</label> <div class="col-sm-9"> <div class="form-group"><!-- nested form-group acting like row --> <div class="col-sm-4"> <input type="text" class="form-control" placeholder="0"> </div><!-- /.col-sm-4 --> <div class="col-sm-4"> <input type="text" class="form-control" placeholder="0"> </div><!-- /.col-sm-4 --> <div class="col-sm-4"> <div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="jobExperienceDropDown" data-toggle="dropdown"> Dropdown <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu" aria-labelledby="jobExperienceDropDown"> <li role="presentation"> <a role="menuitem" tabindex="-1" href="#">years</a> </li> <li role="presentation"> <a role="menuitem" tabindex="-1" href="#">months</a> </li> </ul> </div><!-- /dropdown --> </div><!-- /.col-sm-4 --> </div><!-- /nested form-group acting like row --> </div><!-- /.col-sm-9 --> </div><!-- /.form-group --> <div class="form-group"> <div class="col-sm-offset-3 col-sm-9"> <button type="submit" class="btn btn-default">Sign in</button> </div> </div> </form>
CSS:
/* ----------- adjusted nested columns grid ----------- */ .my-form .form-group [class*="col-"] .form-group [class*="col-"] { padding-left: .5%; padding-right: .5%; } .my-form .form-group [class*="col-"] .form-group { margin-left: -.5%; margin-right: -.5%; } .my-form .form-group [class*="col-"] .form-group [class*="col-"]:not(:last-child) { margin-bottom: 10px } @media (min-width:768px) { .my-form .form-group [class*="col-"] .form-group [class*="col-"]:not(:last-child) { margin-bottom: 0 } } .my-form .form-group [class*="col-"] .form-group { margin-bottom: 0 }
以上是大佬教程为你收集整理的html – form-inline导致各个表单组件重叠 – bootstrap 3全部内容,希望文章能够帮你解决html – form-inline导致各个表单组件重叠 – bootstrap 3所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。