Bootstrap实战（第一弹：栅格实现5等分或8等分）

最新推荐文章于 2024-08-27 14:47:03 发布

转载最新推荐文章于 2024-08-27 14:47:03 发布 · 701 阅读

收录于

博客介绍了使用Bootstrap栅格对网页进行模块分割的方法，如2等分用col-md-6、3等分用col-md-4等。同时指出直接用Bootstrap进行5等分或8等分不方便，可参考其栅格写法，通过自定义CSS实现，还以8等分为例给出了实现方法。

转载自：https://blog.csdn.net/lianjiww/article/details/55225857

在使用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;
  }
}1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32