html - "col"和 "row"响应

Question

我正在使用 Bootstrap 4，我想要做的是下图:

当我试图实现它时，结果是这样的:

.

这发生在屏幕宽度大于 1200 像素的屏幕上。我试图删除 row 和 col。我还没有找出问题所在。

JS fiddle link here .

<div class="row">
        <div class="col">
            <div class="row">
                <div class="col-lg-4">
                    <label>Text Label</label>
                </div>
                <div class="col-lg-8">
                    <input class="form-control input-sm"  type="text">
                </div>
            </div>
        </div>
        <div class="col">
            <div class="row">
                <div class="col-lg-4">
                    <label>Text Label</label>
                </div>
                <div class="col-lg-8">
                    <input class="form-control input-sm"  type="text">
                </div>
            </div>
        </div>
        <div class="col">
            <div class="row">

            </div>
        </div>
...

Answer 1

在使用网格系统之前，需要先使用一个容器。

如果您希望行的宽度固定，则可以使用 .container，如果您希望行的宽度为全宽，则可以使用 .container-fluid。

如果您的代码在 fiddle 中，请将第一个 .row 类替换为上述两个类之一:

选项 1:.container

<div class="container" style="background-color: lightblue">
        <!-- Row 1 -->
        <div class="row">
            <!-- Columns and content of Row 1 -->
        </div>
        <!-- Row 2 -->  
        <div class="row">
            <!-- Columns and content of Row 2 -->
        </div>
    <div>
</div>

在本 fiddle 中查看实际效果.

选项 2:.container-fluid

<div class="container-fluid" style="background-color: lightblue">
        <!-- Row 1 -->
        <div class="row">
            <!-- Labels and Inputs of Row 1 -->
        </div>
        <!-- Row 2 -->  
        <div class="row">
            <!-- Labels and Inputs of Row 2 -->
        </div>
    <div>
</div>

在本 fiddle 中查看实际效果.

另见:Grid System (Bootstrap 4 Documentation)