bootstrap网格布局笔记

bootstrap网格布局笔记

1. 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>

1. 嵌套图片，不能正常显示

   例一：

解决：在图片上加w-100 h-100，可以避免

例二：

解决：不对齐的那一个row增加flex布局

代码：

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