zoukankan      html  css  js  c++  java
  • 关于bootstrap栅格系统的五等分以及八等分代码

    众所周知,bootstrap的栅格系统是基于十二等分的,今天拿到设计的设计稿一看,发现一个图片list上只有8张图片,然后上网查资料,发现只能自己写css代码实现,故写博客记录代码。

    以下是八等分的代码

    <style type="text/css">
    .col-xs-1-8,
    .col-sm-1-8,
    .col-md-1-8,
    .col-lg-1-8{
                position: relative;
                min-height: 1px;
                margin-right: 10px;
                margin-left: 10px;
    }
    
    .col-xs-1-8{
                width:12.5%;
                float:left;
    }
    
    @media (min-768px){
                    .col-sm-1-8{
                                width: 12.5%;
                                float: left;
                    }
    }
    
    @media (min-992px){
                    .col-md-1-8{
                                width: 12.5%;
                                float: left;
                    }
    }
    
    @media (min-1200px){
                    .col-lg-1-8{
                                width: 12.5%;
                                float:left;
                    }
    }
    </style>

    5等分代码同理

    <style type="text/css">
    .col-xs-1-5,
    .col-sm-1-5,
    .col-md-1-5,
    .col-lg-1-5 {
        position: relative;
        min-height: 1px;
        margin-right: 10px;
        margin-left: 10px;
     
    }
     
    .col-xs-1-5 {
        width: 18%;
        float: left;
    }
     
    @media (min- 768px) {
        .col-sm-1-5 {
            width: 18%;
            float: left;
        }
    }
     
    @media (min- 992px) {
        .col-md-1-5 {
            width: 18%;
            float: left;
        }
    }
     
    @media (min- 1200px) {
        .col-lg-1-5 {
            width: 18%;
            float: left;
        }
    }
    </style>
  • 相关阅读:
    I can do more…
    在希望的田野上
    卓越管理培训笔记
    Python 学习小计
    谈谈“直抒己见”
    [更新]关于博客园不支持RSS全文输出的解决方案
    效率生活二三事
    个人阅读解决方案
    Oracle函数sys_connect_by_path 详解
    基础班-模板配置
  • 原文地址:https://www.cnblogs.com/wiggin-Z/p/11057676.html
Copyright © 2011-2022 走看看