Col-md-12 在 col-md-6 中无法正常工作？答案

【问题标题】：Col-md-12 is not working properly inside col-md-6?Col-md-12 在 col-md-6 中无法正常工作？
【发布时间】：2019-03-11 15:26:05
【问题描述】：

下面是我的代码结构。我正在尝试使用 col-md-12 类为电子邮件列提供全宽，但它不起作用。我尝试手动添加 width: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 -->

如果需要任何进一步的细节，请告诉我！任何帮助将不胜感激。再次感谢您。

谢谢

【问题讨论】：

标签： html twitter-bootstrap twitter-bootstrap-3 bootstrap-4

【解决方案1】：

要使其全宽，您应该使用documentation 中提到的.btn-block。它可能需要是块级元素才能成为全宽。

【讨论】：

【解决方案2】：

Bootstrap 提供了一些示例。您的与“结帐表格”非常相似：http://getbootstrap.com/docs/4.1/examples/checkout/

我建议您看一下它，因为它是由引导团队设计和实现的。您会发现好的做法（何时以及如何使用行、关键类以确保响应等）。

【讨论】：