Grid Bootstrap4网格系统将COL对齐，使其彼此靠近 ...

所以在这个宽度上，它看起来很整齐

当我稍微宽一点时，我看到第二排的div彼此不近。是否有方法使最后一列中的列彼此靠近（并与第1行的第2、3、4列对齐）？

---

这里有一个相同的示例。

使用

列自动

而不是*

列

，因为您对

框使用固定宽度，以便它们占据所需的空间。并对行使用
对齐资源中心，以对齐中心的列。最重要的是，使用p-2而不是m-2


.box{
宽度：200px；
高度：100px；
背景：浅蓝色；
}

你好
你好
你好
你好
你好
以下是最后一行对齐的几个不同选项

将最后一行与中心对齐

我发现您希望最后一行列在2,3,4下对齐，因此在本例中，您可以简单地使用
justify content center
以及
col auto
列。
col auto
使用flexbox收缩功能使列宽适合内容

<div class="container">
    <div class="row no-gutters">
        <div class="col m-2">
            <div />
        </div>
        <div class="col m-2">
            <div />
        </div>
        <div class="col m-2">
            <div />
        </div>
...
    </div>
</div>


你好
你好
..
你好
你好



将最后一行向左对齐

将最后一行向左对齐是以前解决过的flexbox问题。如果您不介意整个布局不居中，只需使用col auto缩小列的宽度以适合框并对齐内容开始

<div class="container">
    <div class="row no-gutters justify-content-center">
        <div class="col-auto m-2">
            <div class="box mx-auto">
                hello
            </div>
        </div>
        <div class="col-auto m-2">
            <div class="box mx-auto">
                hello
            </div>
        </div>
        ..
        <div class="col-auto m-2">
            <div class="box mx-auto">
                hello
            </div>
        </div>
        <div class="col-auto m-2">
            <div class="box mx-auto">
                hello
            </div>
        </div>
    </div>
</div>


你好
你好
....

（对齐开始）

如果您需要将整个布局居中，您可以从其他答案中看到，有多种变通方法可以对齐左最后一行。IMO，引导程序4中最简单、最可靠的方法是在末尾使用一个空的间隔元件。您将需要4个空间隔，因为任何一行中的最大间隔为5列

<div class="row no-gutters justify-content-start">
        <div class="col-auto m-2">
            <div class="box mx-auto">
                hello
            </div>
        </div>
        <div class="col-auto m-2">
            <div class="box mx-auto">
                hello
            </div>
        </div>
        ....
</div>


你好
你好
你好
...
你好

（末尾的间隔符）
刚刚添加了一个JSFIDLE。col auto与col相反，到底在做什么？
<div class="row no-gutters justify-content-center">
    <div class="col-auto m-2">
        <div class="box mx-auto">
            hello
        </div>
    </div>
    <div class="col-auto m-2">
        <div class="box mx-auto">
            hello
        </div>
    </div>
    <div class="col-auto m-2">
        <div class="box mx-auto">
            hello
        </div>
    </div>
    ...
    <div class="col-auto m-2">
        <div class="box mx-auto">
            hello
        </div>
    </div>
    <div class="col-auto m-2">
        <div class="box invisible"></div>
    </div>
    <div class="col-auto m-2">
        <div class="box invisible"></div>
    </div>
    <div class="col-auto m-2">
        <div class="box invisible"></div>
    </div>
    <div class="col-auto m-2">
        <div class="box invisible"></div>
    </div>
</div>