Question

Bootstrap 有自己的网格系统，我想尽可能多地利用它，以便我可以最大限度地减少任何自定义 CSS。

我有下面的代码，其中我在这里有几个 row 类，您可以在此处看到第一行与行的其余部分不对齐。有什么办法可以让这个对齐吗？

您也可以在 codepen https://codepen.io/aceraven777/pen/zYZMpEd

上查看

<div>
    <div class="row">
        <div class="col-4">
            <div class="bg-red">
                This is a content
            </div>
        </div>

        <div class="col-8">
            <div class="bg-red">
                This is a content
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-8 row">
            <div class="col-6">
                <div class="bg-red">
                    This is a content
                </div>
            </div>

            <div class="col-6">
                <div class="bg-red">
                    This is a content
                </div>
            </div>

            <div class="col-6">
                <div class="bg-red">
                    This is a content
                </div>
            </div>

            <div class="col-6">
                <div class="bg-red">
                    This is a content
                </div>
            </div>

            <div class="col-6">
                <div class="bg-red">
                    This is a content
                </div>
            </div>

            <div class="col-6">
                <div class="bg-red">
                    This is a content
                </div>
            </div>

            <div class="col-6">
                <div class="bg-red">
                    This is a content
                </div>
            </div>

            <div class="col-6">
                <div class="bg-red">
                    This is a content
                </div>
            </div>
        </div>

        <div class="col-4">
            <div class="bg-red">
                This is a content
                This is a content
                This is a content
                This is a content
                This is a content
                This is a content
            </div>
        </div>
    </div>
</div>

Answer 1

问题是您将行和列组合在一个 div 中。使用 bootstrap，您无法组合行和列，因为存在一些冲突的 css。只需将此 div <div class="col-8 row"> 拆分为两个单独的 div。

<div>
    <div class="row">
        <div class="col-4">
            <div class="bg-red">This is a content</div>
        </div>

        <div class="col-8">
            <div class="bg-red">This is a content</div>
        </div>
    </div>

    <div class="row">
        <div class="col-8">
            <div class="row">
                <div class="col-6">
                    <div class="bg-red">This is a content</div>
                </div>

                <div class="col-6">
                    <div class="bg-red">This is a content</div>
                </div>

                <div class="col-6">
                    <div class="bg-red">This is a content</div>
                </div>

                <div class="col-6">
                    <div class="bg-red">This is a content</div>
                </div>

                <div class="col-6">
                    <div class="bg-red"></div>
                </div>
            </div>
        </div>
    </div>
</div>

Bootstrap 4 网格未对齐

1 个答案: