具有引导程序3的表单元素对齐问题

Question

我正在使用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>

根据我的解决方案，空白问题已解决。但是Tab索引正在上升或下降。但是我需要从左到右。

您能帮我解决这些问题吗？任何人都知道更好的结构吗？

Answer 1

将tabindex属性添加到input，并按要求的顺序添加值。

<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>