html – form-inline导致各个表单组件重叠

当我了解更多关于bootstrap的信息时,我取得了很好的进展,但我再一次面临着一个基本的挑战.这是关于内联形式.

请参阅附件截图.如你所见,我有两个问题.第一个易于识别的是,在“体验”部分 – 这是嵌套在表单组中的内联表单,问题是重叠字段.理想情况下,它们应该彼此相邻,它们之间有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>

解决方法

表单布局与表单本身上的类有很大关系,例如form-horizontal,这是屏幕截图所反映的表单类型.但是,你的html混合了内联表单类,并在表单组中组合了col类,就像在行中添加列类一样 – 没有完成.无论如何,这不是你确切的形式,但它足以评论,一旦你学到它就能得到你想要的东西.我为此选择了你的下拉菜单,但除非你使用一些插件来选择下拉(有一个),你可以在表单中使用选择菜单.

演示：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相关文章