默認的Bootstrap網格系統使用12列，每個跨度具有30px以下裝訂線。裝訂線是列之間的空白。裝訂線寬度似乎介于20px- 之間30px。假設它在30px這里。我想刪除特定的裝訂線空間div，以便該行中沒有裝訂線空間。每個跨度將彼此相鄰，且不存在排水溝。問題是，如果我刪除30px留在行末的360px（12 * 30px）邊距（裝訂線）。鑒于我只想刪除特定的裝訂線空間div。假設它是用于div中的main_content div。div#main_content div{ /* no gutter for the divs in main_content */}如何在div不失去Bootstrap響應能力且在行尾不留空間的情況下，為特定的對象刪除裝訂線？
3 回答
30秒到達戰場
TA貢獻1828條經驗 獲得超6個贊
對于Bootstrap 3.0或更高版本，請參見此答案
我們只在.span1這里看課（在12個寬的網格上的一列），但是您可以通過從以下位置刪除左邊距來實現所需的功能：
.row-fluid [class*="span"] { margin:0 } // line 571 of bootstrap responsive
然后將.row-fluid .span1的寬度更改為等于100％除以12列（8.3333％）。
.row-fluid .span1 { width: 8.33334% } // line 632 of bootstrap responsive
您可能想要通過添加一個附加類來做到這一點，該附加類將使您保持基本柵格系統完整無缺：
.row-fluid [class*="NoGutter"] { margin-left:0 }
.row-fluid .span1NoGutter { width: 8.33334% }
<div class="row-fluid show-grid">
<div class="span1NoGutter">1</div>
</div>
您也可以對所有其他列重復此模式：
.row-fluid .span2NoGutter { width:16.66667%; margin-left:0 } // 100% / 6 col
.row-fluid .span4NoGutter { width:25%; margin-left:0 } // 100% / 4 col
.row-fluid .span3NoGutter { width:33.33333%; margin-left:0 } // 100% / 3 col
or
.row-fluid .span4NoGutter { width:25% }
.row-fluid [class*="NoGutter"] { margin-left:0 }
*編輯（堅持使用默認網格）
如果需要默認網格系統，則默認寬度為940px（即.container和.span12類）；因此，用最簡單的術語來說，您想將940除以12。這等于12個容器，寬度為78.33333px。
所以bootstrap.css的339行可以像這樣編輯：
.span1 { width:78.33333px; margin-left:0 }
or
.span1 { width:8.33334%; margin-left:0 }
// this should render at 78.333396px (78.333396 x 12 = 940.000752)
- 3 回答
- 0 關注
- 533 瀏覽
相關問題推薦
添加回答
舉報
0/150
提交
取消