溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了Bootstrap網(wǎng)格布局中如何進(jìn)行列換行，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
在上幾節(jié)中已經(jīng)或多或少的介紹了一些關(guān)于網(wǎng)格換行的相關(guān)知識(shí)，在代碼中也有相關(guān)的演示，本節(jié)課將對換行再次單獨(dú)拿出來詳細(xì)講一下，因?yàn)槿绻麑Q行的相關(guān)知識(shí)掌握不熟練，很容易造成網(wǎng)頁排版出現(xiàn)很大偏差，或者出現(xiàn)莫名其妙的問題。另外，以前講的時(shí)候大多數(shù)正好符合滿行，例如4列分2行，但是出問題的往往是不滿行的，例如3列或者5列分兩行，則最后的一行如何顯示方式一不注意就很容易出問題。
網(wǎng)格換行常見問題：
該換行的地方不換行
不該換行的地方換行了
自動(dòng)換行的最后一行排版混亂
.row-cols-*用法我們前面使用的row都是一個(gè)單純的<div class="row">，事實(shí)上，對于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)了。
.row-cols-*-*用法跟設(shè)置列的寬度一樣，設(shè)置行數(shù)也支持響應(yīng)式設(shè)計(jì)，如下代碼展示了其具體用法，注意不存在row-cols-xs-1這樣的類，請使用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)畫
當(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ì)講了，如果有不明白的地方還請4.2.4節(jié)內(nèi)容。
在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>
本來顯示在一行的，顯示成兩行。
感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“Bootstrap網(wǎng)格布局中如何進(jìn)行列換行”這篇文章對大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來學(xué)習(xí)!
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼