Question

下面是我的代码结构。我正在尝试通过使用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 -->

让我知道是否需要其他详细信息！任何帮助将不胜感激。再次非常感谢。

谢谢

Answer 1

要使其具有全角，应使用documentation中所述的.btn-block。为了全宽，可能需要是块级元素。

Answer 2

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

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

col-md-12在col-md-6内部无法正常工作？

2 个答案: