bootstrap柵格系統(tǒng)顯示規(guī)則

移動(dòng)設(shè)備優(yōu)先(bootstrap?3.x版)

xs總是水平排放

sm小于768px時(shí)????垂直排放
sm大于等于768px??水平排放

md小于992px時(shí)????垂直排放
md大于等于992px時(shí)????水平排放

lg小于1200px時(shí)????垂直排放
lg大于等于1200px??水平排放

總結(jié):

? ?1? 較大尺寸未設(shè)置時(shí)，默認(rèn)會(huì)繼承較小的尺寸

<div?class="row">
????<div?class="col-md-4">1</div>
????<div?class="col-md-4">2</div>
????<div?class="col-md-4">3</div>
</div>

像上面的情況：大屏和中等屏都是3列顯示，小于中等屏(也就是<992px)的時(shí)候就會(huì)垂直顯示

? ?2? 響應(yīng)式布局: 根據(jù)尺寸變化，當(dāng)達(dá)到臨界值時(shí)，匹配相應(yīng)的設(shè)置

bootstrap中的媒體查詢(xún)

3 理解水平排放和垂直排放和總是水平排放的原理

1. 水平排放，說(shuō)明該柵格是具有浮動(dòng)屬性的，bs都是用的float:left，左浮動(dòng)

2. 垂直排放，說(shuō)明該柵格是不具有浮動(dòng)屬性，那么該div就會(huì)獨(dú)占一行，所以就會(huì)垂直排放，并且在bs中會(huì)同時(shí)讓該元素的width設(shè)置成100%，所以此時(shí)就是一整行排放了

3. 總是水平排放(col-xl-*)，說(shuō)名擁有col-xl-*類(lèi)名的div，始終具有float屬性。注意，總是水平排放，不代表?yè)碛衏ol-xl-*類(lèi)名的div不能垂直排放，比喻說(shuō)讓每一個(gè)div添加col-xl-12類(lèi)名，就是垂直排放，因?yàn)榇藭r(shí)width是100%，但是他們還是擁有float屬性