栅格系统

变量

手机:lib/assets/stylesheets/_variables_phone.scss
桌面:lib/assets/stylesheets/_variables.scss

Eop Frontend 定义整个栅格为 24 个。 百分比宽度定义。

手机 桌面

.col-lg-14 .col-xs-24
.col-lg-10 .col-xs-24
.col-lg-12 .col-xs-12
.col-lg-12 .col-xs-12
.col-lg-1 .col-xs-2
.col-lg-1 .col-xs-2
.col-lg-1 .col-xs-2
.col-lg-1 .col-xs-2
.col-lg-1 .col-xs-2
.col-lg-1 .col-xs-2
.col-lg-1 .col-xs-2
.col-lg-1 .col-xs-2
.col-lg-1 .col-xs-2
.col-lg-1 .col-xs-2
.col-lg-1 .col-xs-2
.col-lg-1 .col-xs-2
.col-lg-1 .col-xs-2
.col-lg-1 .col-xs-2
.col-lg-1 .col-xs-2
.col-lg-1 .col-xs-2
.col-lg-1 .col-xs-2
.col-lg-1 .col-xs-2
.col-lg-1 .col-xs-2
.col-lg-1 .col-xs-2
.col-lg-1 .col-xs-2
.col-lg-1 .col-xs-2
.col-lg-1 .col-xs-2
.col-lg-1 .col-xs-2
  
  <div class="container show-grid">
    <div class="col-lg-14 col-xs-24">.col-lg-14 .col-xs-24</div>
    <div class="col-lg-10 col-xs-24">.col-lg-10 .col-xs-24</div>
    <div class="col-lg-12 col-xs-12">.col-lg-12 .col-xs-12</div>
    <div class="col-lg-12 col-xs-12">.col-lg-12 .col-xs-12</div>
    <div class="col-lg-1 col-xs-2">.col-lg-1 .col-xs-2</div>
    <div class="col-lg-1 col-xs-2">.col-lg-1 .col-xs-2</div>
    <div class="col-lg-1 col-xs-2">.col-lg-1 .col-xs-2</div>
    <div class="col-lg-1 col-xs-2">.col-lg-1 .col-xs-2</div>
    <div class="col-lg-1 col-xs-2">.col-lg-1 .col-xs-2</div>
    <div class="col-lg-1 col-xs-2">.col-lg-1 .col-xs-2</div>
    <div class="col-lg-1 col-xs-2">.col-lg-1 .col-xs-2</div>
    <div class="col-lg-1 col-xs-2">.col-lg-1 .col-xs-2</div>
    <div class="col-lg-1 col-xs-2">.col-lg-1 .col-xs-2</div>
    <div class="col-lg-1 col-xs-2">.col-lg-1 .col-xs-2</div>
    <div class="col-lg-1 col-xs-2">.col-lg-1 .col-xs-2</div>
    <div class="col-lg-1 col-xs-2">.col-lg-1 .col-xs-2</div>
    <div class="col-lg-1 col-xs-2">.col-lg-1 .col-xs-2</div>
    <div class="col-lg-1 col-xs-2">.col-lg-1 .col-xs-2</div>
    <div class="col-lg-1 col-xs-2">.col-lg-1 .col-xs-2</div>
    <div class="col-lg-1 col-xs-2">.col-lg-1 .col-xs-2</div>
    <div class="col-lg-1 col-xs-2">.col-lg-1 .col-xs-2</div>
    <div class="col-lg-1 col-xs-2">.col-lg-1 .col-xs-2</div>
    <div class="col-lg-1 col-xs-2">.col-lg-1 .col-xs-2</div>
    <div class="col-lg-1 col-xs-2">.col-lg-1 .col-xs-2</div>
    <div class="col-lg-1 col-xs-2">.col-lg-1 .col-xs-2</div>
    <div class="col-lg-1 col-xs-2">.col-lg-1 .col-xs-2</div>
    <div class="col-lg-1 col-xs-2">.col-lg-1 .col-xs-2</div>
    <div class="col-lg-1 col-xs-2">.col-lg-1 .col-xs-2</div>
    <div class="clearfix"></div>
  </div>

列偏移

.col-lg-12 .col-lg-offset-12 .col-xs-12 .col-xs-offset-12
.col-lg-6 .col-lg-offset-6 .col-xs-6 .col-xs-offset-6
.col-lg-6 .col-lg-offset-6 .col-xs-6 .col-xs-offset-6
  
  <div class="containe show-grid">
    <div class="col-lg-12 col-lg-offset-12 col-xs-12 col-xs-offset-12">.col-lg-12 .col-lg-offset-12 .col-xs-12 .col-xs-offset-12</div>
    <div class="col-lg-6 col-lg-offset-6 col-xs-6 col-xs-offset-6">.col-lg-6 .col-lg-offset-6 .col-xs-6 .col-xs-offset-6</div>
    <div class="col-lg-6 col-lg-offset-6 col-xs-6 col-xs-offset-6">.col-lg-6 .col-lg-offset-6 .col-xs-6 .col-xs-offset-6</div>
    <div class="clearfix"></div>
  </div>

列排序

.col-lg-9 .col-lg-push-15 .col-xs-9 .col-xs-push-15
.col-lg-15 .col-lg-pull-9 .col-xs-15 .col-xs-pull-9
  
  <div class="containe show-grid">
    <div class="col-lg-9 col-lg-push-15 col-xs-9 col-xs-push-15">.col-lg-9 .col-lg-push-15 .col-xs-9 .col-xs-push-15</div>
    <div class="col-lg-15 col-lg-pull-9 col-xs-15 col-xs-pull-9">.col-lg-15 .col-lg-pull-9 .col-xs-15 .col-xs-pull-9</div>
    <div class="clearfix"></div>
  </div>