第6節 網格列的換行
Bootstrap網頁布局之網格列的換行
6.1、網格布局中換行常見問題
在上幾節中已經或多或少的介紹了一些關于網格換行的相關知識，在代碼中也有相關的演示，本節課將對換行再次單獨拿出來詳細講一下，因為如果對換行的相關知識掌握不熟練，很容易造成網頁排版出現很大偏差，或者出現莫名其妙的問題。另外，以前講的時候大多數正好符合滿行，例如4列分2行，但是出問題的往往是不滿行的，例如3列或者5列分兩行，則最后的一行如何顯示方式一不注意就很容易出問題。
網格換行常見問題：
該換行的地方不換行
不該換行的地方換行了
自動換行的最后一行排版混亂
6.2、列的換行
6.2.1 .row-cols-*用法
我們前面使用的row都是一個單純的<div>，事實上，對于row也可以進一步的使用row-cols-*類快速設置最能呈現內容和布局的列數。普通的.col-*類應用于各個列（例如.col-md-4），而row-cols-*類是作為快捷方式在父.row上設置的。
.row-cols-*的星號可以寫數字，數字代表一行要顯示的列數，而不是寬度，這一點不要和普通的.col-*相混淆。另外還可以使用.row-cols-auto自適應寬度，不過這樣一來，布局很可能會脫離你的控制。
下面還是用代碼來演示以下：
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="keywords" content=""> <meta name="description" content=""> <link href="bootstrap5/bootstrap.min.css" rel="stylesheet"> <title>網格行列演示</title> </head> <body> <div> <div class="row row-cols-3"> <div> Bootstrap是什么？ </div> <div> Bootstrap是什么？ </div> <div> Bootstrap是什么？ </div> <div> Bootstrap是什么？ </div> <div> Bootstrap是什么？ </div> <div> Bootstrap是什么？ </div> <div> Bootstrap是什么？ </div> <div> Bootstrap是什么？ </div> </div> </div> <script src="bootstrap5/bootstrap.bundle.min.js" ></script> </body> </html>
顯示結果如下
試著把row-cols-3中的3改為2、4、5、6等查看效果。 有沒有發現還有個小驚喜，通過設置列的寬度col-我們沒法平均一行顯示5列，但是通過設置row-cols-5就可以實現了。
6.2.2 .row-cols-*-*用法
跟設置列的寬度一樣，設置行數也支持響應式設計，如下代碼展示了其具體用法，注意不存在row-cols-xs-1這樣的類，請使用row-cols-1，也就是默認不寫就是最小的屏幕。
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="keywords" content=""> <meta name="description" content=""> <link href="bootstrap5/bootstrap.min.css" rel="stylesheet"> <title>網格行列演示</title> </head> <body> <div> <div class="row row-cols-md-1 row-cols-md-2 row-cols-lg-3"> <div> Bootstrap是什么？ </div> <div> Bootstrap是什么？ </div> <div> Bootstrap是什么？ </div> <div> Bootstrap是什么？ </div> <div> Bootstrap是什么？ </div> <div> Bootstrap是什么？ </div> <div> Bootstrap是什么？ </div> <div> Bootstrap是什么？ </div> </div> </div> <script src="bootstrap5/bootstrap.bundle.min.js" ></script> </body> </html>
響應式效果動畫
6.2.3 超寬換行
當一個row中，每個單元格都設置了寬度數值，當一行中，剩下的寬度已經放不下下一個單元格的時候，會自動換行。這部分內容我已經在“第四節Bootstrap網頁布局網格系統”做了詳細的講解和演示，在此就不在細講了，如果有不明白的地方還請4.2.4節內容。
6.2.4 強制換行
在Bootstrap 不改變每列的寬度強制換行通常添加多個row來完成的，但是有時候需要在一個row內的某個列后強制換行，這時候可以使用一個小技巧：后需要換行的地方，添加一個寬度為100%，高度為0的div來實現強制換行。
<div class="container"> <div class="row"> <div class="col-6 col-sm-3">.col-6 .col-sm-3</div> <div class="col-6 col-sm-3">.col-6 .col-sm-3</div> <!-- 此處強制換行 --> <div class="w-100"></div> <div class="col-6 col-sm-3">.col-6 .col-sm-3</div> <div class="col-6 col-sm-3">.col-6 .col-sm-3</div> </div> </div>
本來顯示在一行的，顯示成兩行。
今天的課程就到這里，請關注我，及時學習 俺老劉原創的《Bootstrap5零基礎到精通》第七節 Bootstrap網頁布局之網格列的排序與偏移。