嵌套行大于父级答案

【问题标题】：Nested Rows Larger Than Parent嵌套行大于父级
【发布时间】：2018-08-06 08:18:48
【问题描述】：

我在使用 Bootstrap 4 网格布局时遇到问题，我正在使用垂直表单。

我想将 col-lg-9(child) 嵌套在 col-lg-6(parent) 中。

例如：

<div class="form">
  <div class="row">
    <div class="col-lg-6">
      <div class="form-group">
        <label for="">First name</label>
        <input class="form-control" type="text">
      </div>
      <div class="form-group">
        <label for="">Last name</label>
        <input class="form-control" type="text">
      </div>
    </div>
    <div class="row">
      <div class="col-lg-9">
        <div class="col">
          <div class="form-group">
            <label for="">City</label>
            <input type="text">
          </div>
        </div>
        <div class="col">
          <div class="form-group">
            <label for="">Street</label>
            <input type="text">
          </div>
        </div>
        <div class="col">
          <div class="form-group">
            <label for="">Zip</label>
            <input type="text">
          </div>
        </div>
      </div>
    </div>
    <div class="form-group">
      <label for="">Email address</label>
      <input class="form-control" type="text">
    </div>
    <div class="form-group">
      <label for="">Additional info</label>
      <input class="form-control" type="text">
    </div>
  </div>
</div>

Created a sample mock-up for additional explanation.

【问题讨论】：

阅读docs on nesting。 col-* 必须包含在row中

标签： html bootstrap-4

【解决方案1】：

这是因为您将列直接嵌套在其他列中。不要那样做。

在列中嵌套时，您必须先在其中放置一个 Bootstrap row，然后在该新行中放置至少一个 Bootstrap 列。

永远不要将 Bootstrap 列直接嵌套在另一个 Bootstrap 列中。

这是您的案例中必须具有的嵌套结构：

<div class="container">
    <div class="row">
        <div class="col-lg-6">
            <div class="row">
                <div class="col-lg-9">
                    content goes here
                </div>
            </div>
        </div>
    </div>
</div>

参考：

https://getbootstrap.com/docs/4.0/layout/grid/#nesting

【讨论】：