Bootstrap4网格系统使cols彼此靠近

Question

<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>

所以在这个宽度上看起来很好

当我略微宽一点时，我发现第二排的div并不相互接近。有没有办法将最后一列中的cols对齐（并与第1行的第2,3,4列对齐）？

这是一个jsfiddle。

Answer 1

使用 col-auto 代替 * col ，因为您使用boxes的固定宽度，因此它们需要尽可能多的必要的空间。并使用 justify-content-center 为行来对齐中心的列。最重要的是，使用 p-2 代替 m-2 。

＆＃13;

＆＃13;

.box {
  width: 200px;
  height: 100px;
  background: lightblue;
}

＆＃13;

<link href="http://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row no-gutters justify-content-center">
   <div class="col-auto p-2">
      <div class="box mx-auto">
         hello
      </div>
   </div>
   <div class="col-auto p-2">
      <div class="box mx-auto">
         hello
      </div>
   </div>
   <div class="col-auto p-2">
      <div class="box mx-auto">
         hello
      </div>
   </div>
   <div class="col-auto  p-2">
      <div class="box mx-auto">
         hello
      </div>
   </div>   
   <div class="col-auto p-2" >
      <div class="box mx-auto">
         hello
      </div>
   </div> 
</div>

＆＃13;

＆＃13;

＆＃13;

http://jsfiddle.net/6bx12u5w

您使用较旧版本的Bootstrap。最好使用最新版本，因为添加了一些新类。

更新

col 占用所有可用空间，而 col-auto 占用的空间与所需空间一样多：它占用的空间与自然相同它的宽度。

Answer 2

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

将最后一行与中心对齐

我发现您希望最后一行cols在2,3,4下对齐，因此在这种情况下，您只需使用justify-content-center和col-auto列。 col-auto使用flexbox shrink来使列宽适合内容。

<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>

https://www.codeply.com/go/iwL7PW77En

将最后一行左对齐

将最后一行左对齐是之前已解决的Flexbox问题。如果您不介意将整个布局置于中心位置，只需使用col-auto缩小列的宽度以适合框并验证内容的开始。

<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>

https://www.codeply.com/go/LZkOF9zexh（对齐开始）

如果您需要整个布局居中，正如您可以从其他答案中看到的那样，有多种解决方法可以对齐最后一行。 IMO，Bootstrap 4中最简单，最可靠的方法是在末尾使用空的间隔元素。你需要4个空的垫片，因为任何一行的最大值都是5个柱子。

<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>

https://www.codeply.com/go/F7pGyqIIT6（最后的垫片）