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

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

Here is a jsfiddle for the same.

回答1:

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

---

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

---

Update

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.

回答2:

Here are a few different options for last row alignment.

Align last row to center

I see that you want the last row cols aligned under 2,3,4, so in this case you can simply use justify-content-center along with the col-auto columns. The col-auto uses flexbox shrink to make the column width fit the content.

<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

---

Align last row to left

Aligning the last row to the left is a flexbox issue that has been addressed before. If you don't mind having the entire layout not centered, just use col-auto to shrink the width of the columns to fit the boxes and justify-content-start.

<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 (align start)

If you need the entire layout centered, as you can see from the other answers there are various workarounds to align the last row left. IMO, the simplest, most reliable way in Bootstrap 4 is using a empty spacer elements at the end. You'll need 4 empty spacers since the max in any row is 5 cols.

<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 (spacers at end)

来源：https://stackoverflow.com/questions/50918774/bootstrap4-grid-system-align-cols-to-be-close-to-each-other