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>