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列对齐)？

​

这里是一个相同的小提琴。

Answer 1

使用col-auto而不是***col，，因为您对boxes使用固定的宽度，这样它们就会占用所需的空间。并对行使用justify-content-center对齐中心的列。最重要的是，使用p-2而不是m-2**。

​

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

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

​

http://jsfiddle.net/6bx12u5w

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

更新

col占用了所有可用空间，而col-auto占用了它所需的空间:它占用的空间与其内容的自然宽度一样大。

Answer 2

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

将最后一行对齐到中心

我看到您希望最后一行cols在2,3,4下面对齐，因此在本例中，您可以简单地将justify-content-center与col-auto列一起使用。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>

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

将最后一行对齐到左对齐

将最后一行与左边对齐是一个以前已经解决过的柔性盒问题。如果您不介意整个布局没有居中，只需使用content缩小列的宽度，以适应框和调整-内容-开始。

<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://codeply.com/go/LZkOF9zexh (对齐启动)

如果您需要以整体布局为中心的，正如您从其他答案中可以看到的那样，有各种不同的方法来对齐最后一行。国际海事组织，最简单，最可靠的方式，在启动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://codeply.com/go/F7pGyqIIT6 (末端间隔)