第6節(jié) 網(wǎng)格列的換行
Bootstrap網(wǎng)頁布局之網(wǎng)格列的換行
6.1、網(wǎng)格布局中換行常見問題
在上幾節(jié)中已經(jīng)或多或少的介紹了一些關(guān)于網(wǎng)格換行的相關(guān)知識(shí)，在代碼中也有相關(guān)的演示，本節(jié)課將對(duì)換行再次單獨(dú)拿出來詳細(xì)講一下，因?yàn)槿绻麑?duì)換行的相關(guān)知識(shí)掌握不熟練，很容易造成網(wǎng)頁排版出現(xiàn)很大偏差，或者出現(xiàn)莫名其妙的問題。另外，以前講的時(shí)候大多數(shù)正好符合滿行，例如4列分2行，但是出問題的往往是不滿行的，例如3列或者5列分兩行，則最后的一行如何顯示方式一不注意就很容易出問題。
網(wǎng)格換行常見問題：
該換行的地方不換行
不該換行的地方換行了
自動(dòng)換行的最后一行排版混亂
6.2、列的換行
6.2.1 .row-cols-*用法
我們前面使用的row都是一個(gè)單純的<div>，事實(shí)上，對(duì)于row也可以進(jìn)一步的使用row-cols-*類快速設(shè)置最能呈現(xiàn)內(nèi)容和布局的列數(shù)。普通的.col-*類應(yīng)用于各個(gè)列（例如.col-md-4），而row-cols-*類是作為快捷方式在父.row上設(shè)置的。
.row-cols-*的星號(hào)可以寫數(shù)字，數(shù)字代表一行要顯示的列數(shù)，而不是寬度，這一點(diǎn)不要和普通的.col-*相混淆。另外還可以使用.row-cols-auto自適應(yīng)寬度，不過這樣一來，布局很可能會(huì)脫離你的控制。
下面還是用代碼來演示以下：
<!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>網(wǎng)格行列演示</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>
顯示結(jié)果如下
試著把row-cols-3中的3改為2、4、5、6等查看效果。 有沒有發(fā)現(xiàn)還有個(gè)小驚喜，通過設(shè)置列的寬度col-我們沒法平均一行顯示5列，但是通過設(shè)置row-cols-5就可以實(shí)現(xiàn)了。
6.2.2 .row-cols-*-*用法
跟設(shè)置列的寬度一樣，設(shè)置行數(shù)也支持響應(yīng)式設(shè)計(jì)，如下代碼展示了其具體用法，注意不存在row-cols-xs-1這樣的類，請(qǐng)使用row-cols-1，也就是默認(rèn)不寫就是最小的屏幕。
<!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>網(wǎng)格行列演示</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>
響應(yīng)式效果動(dòng)畫
6.2.3 超寬換行
當(dāng)一個(gè)row中，每個(gè)單元格都設(shè)置了寬度數(shù)值，當(dāng)一行中，剩下的寬度已經(jīng)放不下下一個(gè)單元格的時(shí)候，會(huì)自動(dòng)換行。這部分內(nèi)容我已經(jīng)在“第四節(jié)Bootstrap網(wǎng)頁布局網(wǎng)格系統(tǒng)”做了詳細(xì)的講解和演示，在此就不在細(xì)講了，如果有不明白的地方還請(qǐng)4.2.4節(jié)內(nèi)容。
6.2.4 強(qiáng)制換行
在Bootstrap 不改變每列的寬度強(qiáng)制換行通常添加多個(gè)row來完成的，但是有時(shí)候需要在一個(gè)row內(nèi)的某個(gè)列后強(qiáng)制換行，這時(shí)候可以使用一個(gè)小技巧：后需要換行的地方，添加一個(gè)寬度為100%，高度為0的div來實(shí)現(xiàn)強(qiáng)制換行。
<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> <!-- 此處強(qiáng)制換行 --> <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>
本來顯示在一行的，顯示成兩行。
今天的課程就到這里，請(qǐng)關(guān)注我，及時(shí)學(xué)習(xí) 俺老劉原創(chuàng)的《Bootstrap5零基礎(chǔ)到精通》第七節(jié) Bootstrap網(wǎng)頁布局之網(wǎng)格列的排序與偏移。