Bootstrap 框架的網(wǎng)格系統(tǒng)寫法

1、數(shù)據(jù)行(.row)必須包含在容器(.container)中,以便為其賦予合適的對齊方式和內(nèi)距(padding)。

如:<div class = "container"><div class = "row"></div></div>

2、在行(.row)中可以添加列(.column),但列數(shù)之和不能超過平分的總列數(shù),比如12。

如:<div class = "container"><div class = "row">

<div class = "col-md-4"><div>

<div class = "col-md-8"><div>

</div></div>

3、具體內(nèi)容應(yīng)當(dāng)放置在列容器(column)之內(nèi),而且只有列(column)才可以作為行容器(.row)的直接子元素

4、通過設(shè)置內(nèi)距(padding)從而創(chuàng)建列與列之間的間距。然后通過為第一列和最后一列設(shè)置負(fù)值的外距(margin)來抵消內(nèi)距(padding)的影響

注意:Bootstrap框架的網(wǎng)格系統(tǒng)還支持列的嵌套。你可以在一個(gè)列中添加一個(gè)或者多個(gè)行(row)容器,然后在這個(gè)行容器中插入列。但在列容器中的行容器(row),寬度為100%時(shí),就是當(dāng)前外部列的寬度。

也就是說:<div class = "col-md-4"><div class = "row"></div></div>的寫法是正確的。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 14,168評論 1 92
  • 選擇qi:是表達(dá)式 標(biāo)簽選擇器 類選擇器 屬性選擇器 繼承屬性: color,font,text-align,li...
    wzhiq896閱讀 2,127評論 0 2
  • Bootstrap是什么? 一套易用、優(yōu)雅、靈活、可擴(kuò)展的前端工具集--BootStrap。GitHub上介紹 的...
    凜0_0閱讀 11,138評論 3 184
  • 選擇qi:是表達(dá)式 標(biāo)簽選擇器 類選擇器 屬性選擇器 繼承屬性: color,font,text-align,li...
    love2013閱讀 2,443評論 0 11
  • 實(shí)現(xiàn)原理 網(wǎng)格系統(tǒng)的實(shí)現(xiàn)原理,僅僅是通過定義容器大小,平分12份(也有平分成24份或32份,但12份是最常見的),...
    lvyweb閱讀 1,684評論 1 2

友情鏈接更多精彩內(nèi)容