【Bootstrap 笔记】bootstrap平均显示5列,7列,8列...的方法

admin

bootstrap平均显示5列,7列,8列,9列,10列,11列的方法
5列的时候代码如下，需要显示 5 列的地方应用这个 class 即可

1. <style>
   
2. .col-lg-2dot4 {
   
3. position: relative;
   
4. min-height: 1px;
   
5. padding-right: 15px;
   
6. padding-left: 15px;
   
7. }
   
8. @media (min-width: 1200px) {
   
9. .col-lg-2dot4 {
   
10. float: left;
    
11. }
    
12. .col-lg-2dot4 {
    
13. width: 20%;
    
14. }
    
15. .col-lg-pull-2dot4 {
    
16. right: 20%;
    
17. }
    
18. .col-lg-push-2dot4 {
    
19. left: 20%;
    
20. }
    
21. .col-lg-offset-2dot4 {
    
22. margin-left: 20%;
    
23. }
    
24. }
    
25. </style>

复制代码

其中起关键作用的是width: 20%;即表示当第5列的时候为20%
可以得到公式：1÷（需要平均分的列数）然后乘以100%


例如，需要平均显示7列，则为1÷7×100%=14.28%
只需要把上面css中的width: 20%改为width: 14.28%;
html代码相对应为

1. <div class="row">
   
2. <div class="col-lg-2dot4">1</div>
   
3. <div class="col-lg-2dot4">2</div>
   
4. <div class="col-lg-2dot4">3</div>
   
5. <div class="col-lg-2dot4">4</div>
   
6. <div class="col-lg-2dot4">5</div>
   
7. <div class="col-lg-2dot4">6</div>
   
8. <div class="col-lg-2dot4">7</div>
   
9. </div>

复制代码

注：被12整除的列数不需要用此方法