body {background-color: #c3c3c3}

Bootstrap 总结(一) 栅格系统

    1. 直接上bootstrap 4 
           

<div class="row">
            <div class="col-md-4 col-sm-3 col-lg-2">                
                <img src="images/logos.png" alt="" />
            </div>
</div>

           col-lg-2  ≥992px    大屏幕 摆放6个 
          col-md-3  ≥768px 中等屏幕摆放4个   一般用这个
          col-sm-4  ≥576px  平板 摆放 三个

         可以一起摆放 

.col- 针对所有设备
.col-sm- 平板 - 屏幕宽度等于或大于 576px
.col-md- 桌面显示器 - 屏幕宽度等于或大于 768px)
.col-lg- 大桌面显示器 - 屏幕宽度等于或大于 992px)
.col-xl- 超大桌面显示器 - 屏幕宽度等于或大于 1200px)

  可以叠加组合使用 更加灵活 


2.
pull-right    

    左右浮动

3
.page-header   加下划线 
lead 

 

posted @ 2019-10-30 10:45  最美胡萝卜  阅读(236)  评论(0编辑  收藏  举报
body {background-color: #c3c3c3}