Bootstrap4网格系统使cols彼此靠近 [英] Bootstrap4 grid system align cols to be close to each other

问题描述

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

因此，在此宽度下，它看起来对齐良好

So in this width it looks well aligned

当我稍微宽一点时，我发现第二行的div彼此不靠近.有没有一种方法可以使最后一列中的cols彼此对齐(并与第1行的2,3,4列对齐)?

When i go slightly wide i see that the div's in the second row are not close to each other. Is there a way to align the cols in the last column to be close to each other (and aligned with column 2,3,4 of row 1)?

这里是 jsfiddle .

推荐答案

使用 col-auto 代替 * col ，因为对boxes，以便它们占用必要的空间.并对行使用 justify-content-center 以使列在中心对齐.最重要的是，使用 p-2 代替 m-2 .

Use col-auto instead of *col, because you use fixed width for the boxes so that they takes as much space as necessary. And use justify-content-center for the row to align the columns in the center. Most importantly, use p-2 instead of 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.最好使用最新的类，因为已经添加了一些新类.

You use an older version of Bootstrap. Better to use the latest one since there are a few new classes has been added.

col 占用所有可用空间，而 col-auto 占用所需的空间:它占用的内容的自然宽度

col takes all the available space while col-auto takes as much as space as it needs: it takes as much space as the natural width of it content.

这篇关于Bootstrap4网格系统使cols彼此靠近的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！