bootstrapV4.6.0 图片宫格布局（案例篇）

---

官方文档 (代码参考)：

• 文档入口1：img图片布局 —> https://v4.bootcss.com/docs/content/images/
• 文档入口2：flex布局 —> https://v4.bootcss.com/docs/utilities/flex/#justify-content

---

效果图如下：

---

代码示下：

<div class="tips-right text-right">
  <figure class="figure mg0 pdt15">
	<img src="statics/images/header_img_1.1be78a0.png" class="figure-img mx-auto d-block  rounded" width="50" alt="海量货源">
	<figcaption class="figure-caption text-center">海量货源figcaption>
figure>
  	<figure class="figure mg0 pdt15 mglr30">
	<img src="statics/images/header_img_2.dfe2889.png" class="figure-img mx-auto d-block  rounded" width="50" alt="智能匹配">
	<figcaption class="figure-caption text-center">智能匹配figcaption>
figure>
  	<figure class="figure mg0 pdt15">
	<img src="statics/images/header_img_3.9e142bc.png" class="figure-img mx-auto d-block  rounded" width="50" alt="高速响应">
	<figcaption class="figure-caption text-center">高速响应figcaption>
figure>
div>

---

使用注意事项：

1. 如果自定义设置尺寸，可移除class.img-fulid（否则，建议加上，以达到图片响应式目的）;
2. 区域内的宫格内容 位置（class.text-right`）;
3. 宫格图片文字
   居中问题（class.text-center）;

---

附件：CSS样式表

.pd0{
     padding: 0;}
.pdt10{
     padding-top: 10px;}
.pdt15{
     padding-top: 15px;}
.pdt20{
     padding-top: 20px;}
.pdlr0{
     padding-left: 0;padding-right: 0;}

.mg0{
     margin: 0;}
.mgt10{
     margin-top: 10px;}
.mgt15{
     margin-top: 15px;}
.mgt20{
     margin-top: 20px;}
.mgt25{
     margin-top: 25px;}
.mglr30{
     margin-left: 30px;margin-right: 30px;}

---

以上就是关于“ bootstrapV4.6.0 图片宫格布局（案例篇） ” 的全部内容。