在使用Bootstrap栅格的时候,我们可以对网页方便的进行模块分割。
要2等分,使用col-md-6即可;
要3等分,使用col-md-4即可;
要4等分,使用col-md-3即可;
要6等分,使用col-md-2即可。
但如果我们要5等分或者8等分怎么办呢?
直接使用Bootstrap是不方便进行5等分或者8等分的,但是我们可以参考Bootstrap的栅格写法,来自己写css实现5等分或者8等分。
这里以8等分为例,使用如下css即可:
.col-xs-1-8,.col-sm-1-8,.col-md-1-8,.col-lg-1-8 {
min-height: 1px;
padding-left: 15px;
padding-right: 15px;
position: relative;
}
.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;
}
}