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

文章目录

• • • 官方文档 (代码参考)：
    • 效果图如下：
    • 代码示下：
    • 使用注意事项：
    • • • 附件：CSS样式表

官方文档 (代码参考)：

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

效果图如下：

代码示下：

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

附件：CSS样式表

<!--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 图片宫格布局（案例篇） ” 的全部内容。

标签：right,top,padding,案例,文档,margin,bootstrapV4.6,宫格
来源： https://blog.csdn.net/qq_35393869/article/details/113505762