嵌套行比父行大 [英] Nested Rows Larger Than Parent

问题描述

我遇到Bootstrap 4网格布局和问题的问题。我正在使用垂直表格。

I have an issue with Bootstrap 4 grid layout & I'm working with Vertical forms.

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

I would like to nest col-lg-9(child) inside 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>

创建了一个示例模型以获得其他说明。

推荐答案

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

It's because you are nesting columns directly inside other columns. Don't' do that.

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

When nesting in a column you must first put a Bootstrap row inside it and then put at least one Bootstrap column inside that new row.

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

Don't ever nest a Bootstrap column directly inside another Bootstrap column.

以下是您必须拥有的嵌套结构：

Here's the nesting structure you must have in your case:

<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

这篇关于嵌套行比父行大的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！