Framework7网格布局 Framework7网格布局|Framework7

内容网格用于根据你的需要放置内容。 Framework 7提供了不同类型的网格类型和不同类型的列大小。
不同列大小的不同类的列表：

序号	类	表类	宽度
1)	col-5	tablet-5	5%
2)	col-10	tablet-10	10%
3)	col-15	tablet-15	15%
4)	col-20	tablet-20	20%
5)	col-25	tablet-25	25%
6)	col-30	tablet-30	30%
7)	col-33	tablet-33	33.3%
8)	col-35	tablet-35	35%
9)	col-40	tablet-40	40%
10)	col-45	tablet-45	45%
11)	col-50	tablet-50	50%
12)	col-55	tablet-55	55%
13)	col-60	tablet-60	60%
14)	col-65	tablet-65	65%
15)	col-66	tablet-66	66.6%
16)	col-70	tablet-70	70%
17)	col-75	tablet-75	75%
18)	col-80	tablet-80	80%
19)	col-85	tablet-85	85%
20)	col-90	tablet-90	90%
21)	col-95	tablet-95	95%
22)	col-100	tablet-100	100%
23)	col-auto	tablet-auto	Equal width

例

< !DOCTYPE html> < html> < head> < meta name = "viewport" content = "width = device-width, initial-scale = 1, maximum-scale = 1, minimum-scale = 1, user-scalable = no, minimal-ui" /> < meta name = "apple-mobile-web-app-capable" content = "yes" /> < meta name = "apple-mobile-web-app-status-bar-style" content = "black" /> < title> Layout Grid< /title> < link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" /> < link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" /> < style> div[class* = "col-"] { background: #fff; text-align: center; color: #000; border: 1px solid #D8D8D8; } .row { margin-bottom: 10px; } < /style> < /head> < body> < div class = "views"> < div class = "view view-main"> < div class = "navbar"> < div class = "navbar-inner"> < div class = "center sliding"> Layout Grid< /div> < /div> < /div> < div class = "pages"> < div data-page = "index" class = "page navbar-fixed"> < div class = "page-content"> < div class = "content-block-title"> Columns with gutter< /div> < div class = "content-block"> < div class = "row"> < div class = "col-50"> col 1< /div> < div class = "col-50"> col 2< /div> < /div> < div class = "row"> < div class = "col-25"> col 1< /div> < div class = "col-25"> col 2< /div> < div class = "col-25"> col 3< /div> < div class = "col-25"> col 4< /div> < /div> < div class = "row"> < div class = "col-33"> col 1< /div> < div class = "col-33"> col 2< /div> < div class = "col-33"> col 3< /div> < /div> < div class = "content-block-title"> Columns without gutter< /div> < div class = "content-block"> < div class = "row no-gutter"> < div class = "col-50"> col 1< /div> < div class = "col-50"> col 2< /div> < /div> < div class = "row no-gutter"> < div class = "col-25"> col 1< /div> < div class = "col-25"> col 2< /div> < div class = "col-25"> col 3< /div> < div class = "col-25"> col 4< /div> < /div> < div class = "row no-gutter"> < div class = "col-33"> col 1< /div> < div class = "col-33"> col 2< /div> < div class = "col-33"> col 3< /div> < /div> < /div> < div class = "content-block-title"> Nested Columns< /div> < div class = "content-block"> < div class = "row"> < div class = "col-50"> col 1 < div class = "row"> < div class = "col-40"> col 2< /div> < div class = "col-60"> col 3< /div> < /div> < /div> < div class = "col-50"> col 1 < div class = "row"> < div class = "col-75"> col 2< /div> < div class = "col-25"> col 3< /div> < /div> < /div> < /div> < /div> < div class = "content-block-title"> Columns With Different Equal Width< /div> < div class = "content-block"> < div class = "row"> < div class = "col-100 tablet-50"> col 1< /div> < div class = "col-100 tablet-50"> col 2< /div> < /div> < div class = "row"> < div class = "col-50 tablet-25"> col 1< /div> < div class = "col-50 tablet-25"> col 2< /div> < div class = "col-50 tablet-25"> col 3< /div> < div class = "col-50 tablet-25"> col 4< /div> < /div> < div class = "row"> < div class = "col-100 tablet-40"> col 1< /div> < div class = "col-50 tablet-60"> col 2< /div> < div class = "col-50 tablet-60"> col 3< /div> < div class = "col-100 tablet-40"> col 4< /div> < /div> < /div> < div class = "content-block-title"> Columns With Equal Width< /div> < div class = "content-block"> < div class = "row"> < div class = "col-auto"> col-1< /div> < div class = "col-auto"> col-2< /div> < div class = "col-auto"> col-3< /div> < div class = "col-auto"> col-4< /div> < /div> < div class = "row no-gutter"> < div class = "col-auto"> col-1< /div> < div class = "col-auto"> col-2< /div> < div class = "col-auto"> col-3< /div> < div class = "col-auto"> col-4< /div> < /div> < /div> < /div> < /div> < /div> < /div> < /div> < /div> < script type = "text/javascript" src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"> < /script> < script> var myApp = new Framework7(); var mainView = myApp.addView('.view-main'); < /script> < /body> < /html>

【Framework7网格布局】立即测试