bootstrap网格布局笔记
col-*
不写列数时会平分
可以解决12列不能平分成5、7份这样的问题
<div class="container-fluid">
<div class="row no-gutters">
<div class="col"><img class="img-fluid" src="1.jpg"></div>
<div class="col"><img class="img-fluid" src="1.jpg"></div>
<div class="col"><img class="img-fluid" src="1.jpg"></div>
<div class="col"><img class="img-fluid" src="1.jpg"></div>
<div class="col"><img class="img-fluid" src="1.jpg"></div>
</div>
</div>
-
嵌套图片,不能正常显示
例一:
解决:在图片上加w-100 h-100
,可以避免
例二:
解决:不对齐的那一个row增加flex布局
代码:
扫描二维码关注公众号,回复:
3635595 查看本文章
<div class="row no-gutters">
<div class="col-5 col-sm-5 d-flex flex-column">
<div class="row no-gutters flex-fill">
<div class="col-12 p-1">
<img class="img-fluid w-100 h-100" src="31.png">
</div>
</div>
<div class="row no-gutters flex-fill">
<div class="col-12 p-1">
<img class="img-fluid w-100 h-100" src="31.png">
</div>
</div>
</div>
<div class="col-7 col-sm-7 p-1">
<img class="img-fluid w-100 h-100" src="3.jpg">
</div>
</div>