关于bootstrap栅格系统的五等分以及八等分代码
众所周知,bootstrap的栅格系统是基于十二等分的,今天拿到设计的设计稿一看,发现一个图片list上只有8张图片,然后上网查资料,发现只能自己写css代码实现,故写博客记录代码。
以下是八等分的代码
<style type="text/css"> .col-xs-1-8, .col-sm-1-8, .col-md-1-8, .col-lg-1-8{ position: relative; min-height: 1px; margin-right: 10px; margin-left: 10px; } .col-xs-1-8{ width:12.5%; float:left; } @media (min-width:768px){ .col-sm-1-8{ width: 12.5%; float: left; } } @media (min-width:992px){ .col-md-1-8{ width: 12.5%; float: left; } } @media (min-width:1200px){ .col-lg-1-8{ width: 12.5%; float:left; } } </style>
5等分代码同理
<style type="text/css"> .col-xs-1-5, .col-sm-1-5, .col-md-1-5, .col-lg-1-5 { position: relative; min-height: 1px; margin-right: 10px; margin-left: 10px; } .col-xs-1-5 { width: 18%; float: left; } @media (min-width: 768px) { .col-sm-1-5 { width: 18%; float: left; } } @media (min-width: 992px) { .col-md-1-5 { width: 18%; float: left; } } @media (min-width: 1200px) { .col-lg-1-5 { width: 18%; float: left; } } </style>