Bootstrap 柵格系統(布局)


基本用法
  網格系統用來布局,其實就是列的組合。Bootstrap框架的網格系統中有四種基本的用法。由於Bootstrap框架在不同屏幕尺寸使用了不同的網格樣式,在這一節中所涉及到的示例,我們都以中屏(970px)為例進行介紹,其他屏幕的使用也類似這一種。

1、列組合

列組合簡單理解就是更改數字來合並列(原則:列總和數不能超12),有點類似於表格的colspan屬性,例如:

 

使用上面的結構,你將看到下圖的效果:

 

2、列偏移
有的時候,我們不希望相鄰的兩個列緊靠在一起,但又不想使用margin或者其他的技術手段來。這個時候就可以使用列偏移(offset)功能來實現。使用列偏移也非常簡單,只需要在列元素上添加類名“col-md-offset-*”(其中星號代表要偏移的列組合數),那么具有這個類名的列就會向右偏移。例如,你在列元素上添加“col-md-offset-4”,表示該列向右移動4個列的寬度。

 

如上面的示例代碼,得到的效果如下

 

注意:

不過有一個細節需要注意,使用”col-md-offset-*”對列進行向右偏移時,要保證列與偏移列的總數不超過12,不然會致列斷行顯示

轉自:https://www.cnblogs.com/chessYu/p/7337018.html


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM