bootstrap3无间距栅格

<div class="row photos no-gutter">
    <div class="col-lg-3 col-md-3 col-sm-4 col-xs-6"><img src="img/1.jpg" ></div>
    <div class="col-lg-3 col-md-3 col-sm-4 col-xs-6"><img src="img/2.jpg" ></div>
    <div class="col-lg-3 col-md-3 col-sm-4 col-xs-6"><img src="img/3.jpg" ></div>
    <div class="col-lg-3 col-md-3 col-sm-4 col-xs-6"><img src="img/4.jpg" ></div>
    <div class="col-lg-3 col-md-3 col-sm-4 col-xs-6"><img src="img/5.jpg" ></div>
    <div class="col-lg-3 col-md-3 col-sm-4 col-xs-6"><img src="img/6.jpg" ></div>
    <div class="col-lg-3 col-md-3 col-sm-4 col-xs-6"><img src="img/7.jpg" ></div>
    <div class="col-lg-3 col-md-3 col-sm-4 col-xs-6"><img src="img/8.jpg" ></div>
    <!-- .col-lg-3.col-md-3.col-sm-4.col-xs-6*8>img[src="img/$.jpg"] -->
</div>

.no-gutters {
  margin-right: 0;
  margin-left: 0;

  > .col,
  > [class*="col-"] {
    padding-right: 0;
    padding-left: 0;
  }
}

bootstrap4无间距栅格

.row上带有margin-left: -15px;margin-right: -15px;属性，你可以在.row上上定义.no-gutters属性，从而消除这个属性，使页面不会额外宽出30px，即<div class="row no-gutters"…。(译者原意拆成两行表述)。

修改栅格间距

[class*="col-"] {
    padding: 10px;
}

.row {
    margin-left: -10px;
    margin-right: -10px;
}

居中

文字居中 .text-center

块居住 .center-block

.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

实例：

<div class="row">
   <div class="center-block" style="width:200px;background-color:#ccc;">
      这是 center-block 实例
   </div>
</div>

错误用法：因为center-block的左右margin属性会被col--替换。

<div class="row">
   <div class="col-lg-3 col-lg-3 center-block" style="background-color:#ccc;">
      这是 center-block 实例
   </div>
</div>

列偏移实现居中

<div class="col-md-6 col-md-offset-3"

bootstrap4 .mx-auto实现块居中

<div class="mx-auto bg-warning" style="width:150px">居中显示</div>

bootstrap4 弹性布局实现居中

<div class="d-flex justify-content-center bg-secondary mb-3">
   <div class="p-2 bg-info">Flex item 1</div>
   <div class="p-2 bg-warning">Flex item 2</div>
   <div class="p-2 bg-primary">Flex item 3</div>
 </div>
  
<div class="d-flex flex-wrap align-content-center">..</div>

bootstrap知识

原文：https://www.cnblogs.com/cdnotes/p/14596251.html