网格

创建一个响应式可嵌套的网格布局。

容器

给块元素添加 container 类,将限制块的最大宽度。对于不同屏幕大小,最大宽度也不一样。默认的相关变量如下:

  • @screen-small-min: 320px; // 小屏幕最小宽度
  • @screen-small-max: 639px; // 小屏幕最大宽度
  • @container-small: 100%; // 小屏幕容器宽度
  • @screen-medium-min: 640px; // 中屏幕最小宽度
  • @screen-medium-max:991px; // 中屏幕最大宽度
  • @container-medium: 640px; // 中屏幕容器宽度
  • @screen-large-min: 992px; // 大屏幕最小宽度
  • @screen-large-max: 1199px; // 大屏幕最大宽度
  • @container-large: 960px; // 大屏幕容器宽度
  • @screen-xlarge-min: 1200px; // 超大屏幕最小宽度
  • @container-xlarge: 1168px; // 超大屏幕容器宽度

示例

div 添加类 container
div 添加类 container width-sm-2-1

代码

<div class="container">...</div>
<div class="container width-sm-2-1">...</div>

容器中的栅格行

示例

1/2
1/2

代码

<div class="container">
    <div class="row">
        <div class="width-sm-2-1">...</div>
        <div class="width-sm-2-1">...</div>
    </div>
</div>

1/2
1/2
1/3
2/3
1/4
3/4
2/4
2/4
1/5
4/5
2/5
3/5
1/6
5/6
2/6
4/6
3/6
3/6
1/7
6/7
2/7
5/7
3/7
4/7

代码

<div class="grid">
    <div class="row">
        <div class="width-sm-3-1">...</div>
        <div class="width-sm-3-2">...</div>
        ...
    </div>
    <div class="row">
        <div class="width-sm-6-1">...</div>
        <div class="width-sm-6-5">...</div>
        ... 
    </div>
    <div class="row">
        <div class="width-sm-7-3">...</div>
        <div class="width-sm-7-4">...</div> 
    ... 
</div>

栏间距

默认

给块元素添加 grid 类,默认栏间距

1/2
1/2

给块元素添加 grid-sm 类,缩小栏间距

1/2
1/2

给块元素添加 grid-lg 类,增加栏间距

1/2
1/2

给块元素添加 grid-collapse 类,取消栏间距

1/2
1/2

网格响应性

示例

width-sm-4-1 width-md-2-1 width-lg-4-3
width-sm-4-3 width-md-2-1 width-lg-4-1

代码

<div class="grid">
    <div class="row">
        <div class="width-sm-4-1 width-md-2-1 width-lg-4-3">...</div>
        <div class="width-sm-4-3 width-md-2-1 width-lg-4-1">...</div>
    </div>
</div>

嵌套行

示例

不嵌套 grid

width-sm-7-5
width-sm-7-2

同时嵌套 grid

width-sm-3-1
width-sm-3-2

代码

<div class="grid">
    <div class="row">
        <div class="width-md-2-1">
            <div class="grid">
                <div class="row">
                    <div class="width-sm-3-1">...</div>
                    <div class="width-sm-3-2">...</div>
                </div>
            </div>
        </div>
        ...
    </div>
</div>

偏距

示例

width-sm-3-1
width-sm-3-1 offset-sm-3-1
width-sm-4-1
width-sm-4-1 offset-sm-4-1
width-sm-4-1

代码

<div class="grid">
    <div class="row">
        <div class="width-sm-3-1">...</div>
        <div class="width-sm-3-1 offset-sm-3-1">...</div>
    </div>
    <div class="row">
        <div class="width-sm-4-1">...</div>
        <div class="width-sm-4-1 offset-sm-4-1">...</div>
        <div class="width-sm-4-1">width-sm-4-1</div>
    </div>
</div>

前推或后移

示例

width-sm-3-2 push-sm-3-1
width-sm-4-1 push-sm-4-1
width-sm-4-1 pull-sm-4-1

代码

<div class="grid">
    <div class="row">
        <div class="width-sm-3-2 push-sm-3-1">...</div>
    </div>
    <div class="row">
        <div class="width-sm-4-1 push-sm-4-1">...</div>
        <div class="width-sm-4-1 pull-sm-4-1">...</div>
    </div>
</div>