html5 - bootstrap簡(jiǎn)介中的一點(diǎn)問(wèn)題
問(wèn)題描述
剛才看到這句:通過(guò)為“列(column)”設(shè)置 padding 屬性,從而創(chuàng)建列與列之間的間隔(gutter)。通過(guò)為 .row 元素設(shè)置負(fù)值 margin 從而抵消掉為 .container 元素設(shè)置的 padding,也就間接為“行(row)”所包含的“列(column)”抵消掉了padding。不是很能理解是怎么個(gè)說(shuō)法,有沒(méi)有通俗一點(diǎn)的說(shuō)法或者例子??
問(wèn)題解答
回答1:row的負(fù)margin值主要是為了消除最左邊和最右邊的column元素和container的邊距
可以看下原文(http://getbootstrap.com/css/#...)
Columns create gutters (gaps between column content) via padding. Thatpadding is offset in rows for the first and last column via negativemargin on .rows.
我們知道bootstrap中柵格的使用順序是 container -> row -> col
他們的css定義:
.container { padding-right: 10px; padding-left: 10px; margin-right: auto; margin-left: auto;}.row { margin-right: -10px; margin-left: -10px;}.col-*-* { padding-right: 10px; padding-left: 10px;}
如果沒(méi)有負(fù)margin的抵消,前后就會(huì)有間隙,你可以自己把負(fù)margin去掉對(duì)比下,看下區(qū)別
相關(guān)文章:
1. docker-machine添加一個(gè)已有的docker主機(jī)問(wèn)題2. Span標(biāo)簽3. javascript - ng-options 設(shè)置默認(rèn)選項(xiàng),不是設(shè)置第一個(gè)哦,看清楚了!4. javascript - 計(jì)算面積函數(shù)代碼5. SessionNotFoundException:會(huì)話ID為null。調(diào)用quit()后使用WebDriver嗎?(硒)6. android新手一枚,android使用httclient獲取服務(wù)器端數(shù)據(jù)失敗,但是用java工程運(yùn)行就可以成功獲取。7. javascript - 移動(dòng)端padding問(wèn)題8. java - Spring MVC無(wú)法識(shí)別Controller導(dǎo)致返回的結(jié)果是404?9. java - Collections類(lèi)里的swap函數(shù),源碼為什么要新定義一個(gè)final的List型變量l指向傳入的list?10. redis啟動(dòng)有問(wèn)題?
