时间戳

首页 > 解决方案 > 引导程序3的表单元素对齐问题

html - 引导程序3的表单元素对齐问题

问题描述

我正在使用 bootstrap 3 进行表单设计。我正在使用以下结构。

    <div class="row">
     <div class="col-md-6">
                                    <div class="form-group">
                                        <label class="col-sm-3 control-label" for="concept">Name</label>
                                        <div class="col-sm-9"> 
                                                <input type="text" class="form-control"/>
                                        </div>
                                        </div>

                                              <div class="form-group">
                                        <label class="col-sm-3 control-label" for="concept">Age</label>
                                        <div class="col-sm-9"> 
                                                <input type="text" class="form-control"/>
                                        </div>
                                        </div>
                                    </div>
                 <div class="col-md-6">
                                    <div class="form-group">
                                        <label class="col-sm-3 control-label" for="concept">Class</label>
                                        <div class="col-sm-9"> 
                                                <input type="text" class="form-control"/>
                                        </div>
                                        </div>

                                              <div class="form-group">
                                        <label class="col-sm-3 control-label" for="concept">School</label>
                                        <div class="col-sm-9"> 
                                                <input type="text" class="form-control"/>
                                        </div>
                                        </div>
                                    </div>                      

</div>

<div class="row">
     <div class="col-md-6">
                                    <div class="form-group">
                                        <label class="col-sm-3 control-label" for="concept">Subject</label>
                                        <div class="col-sm-9"> 
                                                <input type="text" class="form-control"/>
                                        </div>
                                        </div>

                                              <div class="form-group">
                                        <label class="col-sm-3 control-label" for="concept">Grade</label>
                                        <div class="col-sm-9"> 
                                                <input type="text" class="form-control"/>
                                        </div>
                                        </div>
                                    </div>
                <div class="col-md-6" id="monthData">
                                <div class="form-group">
                                    <label class="col-sm-3 control-label" for="concept">Monthly Amount</label>
                                    <div class="col-sm-5"> 
                                      <input type="text" class="form-control"/> 
                                      </div>
                                      <div class="col-sm-4"> 
                                      <input type="text"  size="9" class="form-control" placeholder="No.of months">

                                    </div>
                                    </div>

                            </div>                  

</div>

这种布局运作良好。但问题是，有时我需要隐藏“monthData”部门。当我隐藏它时，行的右侧有一个空白空间。我如何避免这种情况。

作为一种解决方案，我尝试如下更改我的布局。

<div class="row"> 
<div class="col-md-6">
form elements 
</div>
<div class="col-md-6">
form elements 
</div>
</div>

根据我的解决方案，空白空间问题已解决。但是标签索引是从上到下的。但我需要从左到右。

你能帮我解决这些问题吗？有人知道更好的结构吗？

标签： htmlcsstwitter-bootstrap-3

解决方案

tabindex按所需顺序将属性添加到inputwith 值。

<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
  <div class="col-md-6">
    <div class="form-group">
      <label class="col-sm-3 control-label" for="concept">Name</label>
      <div class="col-sm-9">
        <input type="text" class="form-control" tabindex="1">
      </div>
    </div>

    <div class="form-group">
      <label class="col-sm-3 control-label" for="concept">Age</label>
      <div class="col-sm-9">
        <input type="text" class="form-control" tabindex="3" />
      </div>
    </div>
  </div>
  <div class="col-md-6">
    <div class="form-group">
      <label class="col-sm-3 control-label" for="concept">Class</label>
      <div class="col-sm-9">
        <input type="text" class="form-control" tabindex="2" />
      </div>
    </div>

    <div class="form-group">
      <label class="col-sm-3 control-label" for="concept">School</label>
      <div class="col-sm-9">
        <input type="text" class="form-control" tabindex="4" />
      </div>
    </div>
  </div>

</div>

<div class="row">
  <div class="col-md-6">
    <div class="form-group">
      <label class="col-sm-3 control-label" for="concept">Subject</label>
      <div class="col-sm-9">
        <input type="text" class="form-control" tabindex="5" />
      </div>
    </div>

    <div class="form-group">
      <label class="col-sm-3 control-label" for="concept">Grade</label>
      <div class="col-sm-9">
        <input type="text" class="form-control" tabindex="9" />
      </div>
    </div>
  </div>
  <div class="col-md-6" id="monthData">
    <div class="form-group">
      <label class="col-sm-3 control-label" for="concept">Monthly Amount</label>
      <div class="col-sm-5">
        <input type="text" class="form-control" tabindex="6" />
      </div>
      <div class="col-sm-4">
        <input type="text" size="9" class="form-control" placeholder="No.of months" tabindex="7">

      </div>
    </div>

  </div>

</div>

推荐阅读