проблема выравнивания элементов формы с bootstrap 3 - PullRequest
Новая
       5

проблема выравнивания элементов формы с bootstrap 3

0 голосов
/ 03 апреля 2020

Я использую 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>

Согласно моему решению, проблема с пустым пространством устранена. Но индекс табуляции идет вверх вниз. но мне нужно слева направо.

Можете ли вы помочь мне решить эти проблемы. кто-нибудь знает лучше структуру ??

1 Ответ

0 голосов
/ 03 апреля 2020

Добавьте атрибут 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>
...