嵌套行比父行大

Question

我对Bootstrap 4网格布局有一个问题＆amp;我正在使用垂直表格。

我想在col-lg-6（父级）中嵌套col-lg-9（child）。

例如：

<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.

Answer 1

这是因为您将列直接嵌套在其他列中。唐＆＃39;吨＆＃39;那样做。

在列中嵌套时，必须首先在其中放置一个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