您的位置: 首页 > 文化知识 > 碎片知识点

Bootstrap怎么栅格实现5等分?

2017-11-28 来源: 作者:

  在学习应用Bootstrap的时候,我们都会使用到栅格,像一些把一行进行2等分,使用col-md-6即可;要3等分,使用col-md-4; 要4等分,使用col-md-3;要6等分,使用col-md-2。

  但是有时候还会碰到使用5等分或者8等分,这时候该怎么写呢?

  直接使用Bootstrap是不可行的,但是我们可以参考Bootstrap的栅格写法,来自己写css实现5等分或者8等分。

  就以5等分为例,使用如下css即可:

  .col-xs-1-5,.col-sm-1-5,.col-md-1-5,.col-lg-1-5 { min-height: 1px; padding-left: 10px; padding-right: 10px; position: relative; }

  .col-xs-1-5 { width: 20%; float: left; }

  @media (min-width: 320px) { .col-sm-1-5 { width: 20%; float: left; } }

  @media (min-width: 768px) { .col-sm-1-5 { width: 20%; float: left; } }

  @media (min-width: 1024px) { .col-md-1-5 { width: 20%; float: left; } }

  @media (min-width: 1200px) { .col-lg-1-5 { width: 20%; float: left; } }

  @media (min-width: 1440px) { .col-lg-1-5 { width: 20%; float: left; } }

  想做成8等分的话,需要.col-xs-1-5,.col-sm-1-5,.col-md-1-5,.col-lg-1-5中的5换成8,然后width:20%修改成width:12.5% 即可。

免责声明:以上内容源自网络,版权归原作者所有,如有侵犯您的原创版权请告知,我们将尽快删除相关内容。