Col-MD-12 не работает должным образом внутри Col-MD-6?

Question

Ниже моя структура кода.Я пытаюсь указать ширину столбца электронной почты с помощью класса col-md-12, но он не работает.Я попытался добавить ширину: 100% вручную, но все равно он не работает.

Ниже приведен снимок того, как выглядит мой вид:

Структура HTML-кода:

<div class="col-md-6 left-side-border-right"><!-- LEFT Column Containing EQ User Fields Start -->
                                   <div class="row">
                                       <section class="col-md-6">
                                           <label class="label">{{EvaluationClientFrontEndForm.getLabel("first_name")}}</label>
                                           <label class="input">
                                               {{ EvaluationClientFrontEndForm.render("first_name", ["class": "form-control"]) }}
                                           </label>
                                       </section>
                                       <section class="col-md-6">
                                             <label class="label">{{EvaluationClientFrontEndForm.getLabel("last_name")}}</label>
                                             <label class="input">
                                                 {{ EvaluationClientFrontEndForm.render("last_name", ["class": "form-control"]) }}
                                             </label>
                                       </section>
                                   </div>

                                  <div class="row">
                                      <section class="col-md-12">
                                          <label class="label">{{EvaluationClientFrontEndForm.getLabel("email")}}</label>
                                          <label class="input">
                                              {{ EvaluationClientFrontEndForm.render("email", ["class": "form-control"]) }}
                                          </label>
                                      </section>
                                  </div>

                                  <div class="row">
                                        <section class="col-md-6">
                                            <label class="label">{{EvaluationClientFrontEndForm.getLabel("phone")}}</label>
                                            <label class="input">
                                                {{ EvaluationClientFrontEndForm.render("phone", ["class": "form-control"]) }}
                                            </label>
                                        </section>
                                  </div>

                                  <div class="row">
                                      <section class="col-md-6">
                                          <label class="label">{{EvaluationClientFrontEndForm.getLabel("age")}}</label>
                                          <label class="input">
                                              {{ EvaluationClientFrontEndForm.render("age", ["class": "form-control"]) }}
                                          </label>
                                      </section>
                                      <section class="col-md-6">
                                            <label class="label">{{EvaluationClientFrontEndForm.getLabel("gender")}}</label><br>
                                            <input type="radio" name="gender" value="male"> Male
                                            <input type="radio" name="gender" value="female"> Female<br>
                                      </section>
                                  </div>


                                  <div class="row">
                                      <section class="col-md-6">
                                          <label class="label">{{EvaluationClientFrontEndForm.getLabel("current_weight")}}</label>
                                          <label class="input">
                                              {{ EvaluationClientFrontEndForm.render("current_weight", ["class": "form-control"]) }}
                                          </label>
                                      </section>
                                      <section class="col-md-6">
                                            <label class="label">{{EvaluationClientFrontEndForm.getLabel("goal_weight")}}</label>
                                            <label class="input">
                                                {{ EvaluationClientFrontEndForm.render("goal_weight", ["class": "form-control"]) }}
                                            </label>
                                      </section>
                                  </div>

                                  <div class="row">
                                      <section class="col-md-6">
                                          <label class="label">{{EvaluationClientFrontEndForm.getLabel("skype_id")}}</label>
                                          <label class="input">
                                              {{ EvaluationClientFrontEndForm.render("skype_id", ["class": "form-control"]) }}
                                          </label>
                                      </section>
                                  </div>

                            </div><!-- LEFT Column Containing EQ User Fields Ends -->

Дайте мне знать, если потребуется дополнительная информация!Любая помощь будет высоко оценена.Еще раз большое спасибо.

Спасибо

Answer 1

Bootstrap предоставляет несколько примеров.Ваша очень похожа на «форму заказа»: http://getbootstrap.com/docs/4.1/examples/checkout/

Я рекомендую вам взглянуть на нее, так как она была разработана и реализована командой начальной загрузки.Вы найдете полезные практики (когда и как использовать строки, ключевые классы для обеспечения отзывчивости и т. Д.).

Answer 2

Для полной ширины вы должны использовать .btn-block, как указано в документации .Вероятно, он должен быть элементом уровня блока, чтобы иметь полную ширину.