我使用的是引导程序 5，但引导程序 4 示例可能就足够了。

显然，我可以通过不使用引导程序来实现这种布局，但这不是我想要弄清楚的。我想知道我是否在引导系统中遗漏了一些我没有使用的东西。

首先，这是我要查找的内容的屏幕截图。

布局规格：

• 容器宽度：1440 像素
• 网格装订线宽度：32 像素
• 14 列布局

每次尝试都有自己的问题：

第一次尝试（见下面的代码）和问题：孤儿（在最后一行）居中对齐。它们不会左对齐。

第二次尝试（见下面的代码）：父级（现在是 12 列布局）太小，所以列不够宽。该设计需要 370 像素宽度的列。

第三次尝试（见下面的代码）：不适用于包装列（显然）。

第一次尝试代码：

    <div class="container">
        <div class="row justify-content-center">
            <div class="col-14 col-md-7 col-lg-4"></div>
            <div class="col-14 col-md-7 col-lg-4"></div>
            <div class="col-14 col-md-7 col-lg-4"></div>
            <div class="col-14 col-md-7 col-lg-4"></div>
        </div>
    </div>

第二次尝试代码：

    <div class="container">
        <div class="row justify-content-center">
            <div class="col-14 col-lg-12">
                <div class="row">
                    <div class="col-14 col-md-7 col-lg-4"></div>
                    <div class="col-14 col-md-7 col-lg-4"></div>
                    <div class="col-14 col-md-7 col-lg-4"></div>
                </div>
            </div>
        </div>
    </div>

第三次尝试代码：

    <div class="container">
        <div class="row justify-content-center">
            <div class="col-14 d-none d-xl-block col-xl-1"></div>
            <div class="col-14 col-md-7 col-lg-4"></div>
            <div class="col-14 col-md-7 col-lg-4"></div>
            <div class="col-14 col-md-7 col-lg-4"></div>
            <div class="col-14 col-md-7 col-lg-4"></div>
            <div class="col-14 d-none d-xl-block col-xl-1"></div>
        </div>
    </div>

重申一下，只寻找引导解决方案。我可以在没有引导的情况下实现这一点，但我想看看我是否遗漏了什么。