欢迎光临一流素材网,免积分免费素材下载!

Bootstrap4网格系统实现5等份

所属栏目:响应式教程更新时间:2021-05-08 来源:网络 原作者:不详 发布:deepdfhy浏览:0

免费开源可商用的PHP万能建站程序-DiYunCMS(帝云CMS)

Bootstrap4的网格系统不支持5等份,我们可以自己增加代码来实现

.col-24,.col-sm-24,.col-md-24,.col-lg-24 {
  width: 100%;
  padding-left: 10px;
  padding-right: 10px;
  position: relative;
}

.col-24 {
  flex: 0 0 20%;
  max-width: 20%;
}

@media (min-width: 768px) {
  .col-sm-24 {
    flex: 0 0 20%;
    max-width: 20%;
  }
}

@media (min-width: 992px) {
  .col-md-24 {
    flex: 0 0 20%;
    max-width: 20%;
  }
}

@media (min-width: 1200px) {
  .col-lg-24 {
    flex: 0 0 20%;
    max-width: 20%;
  }
}


标签:
收藏 0 有帮助 0 没帮助 0 打赏 0
相关教程
给个评价吧
百度云加速250x250