bootstrap栅格五等分

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。众所周知，bBootstrap的栅格系统是很好用的。

但是！！！因为最多能等分出12个栅格，所以就会有一些局限性，比如我想等分出非12的约数，比如5,7,8,9...等分时该怎么办？

那么我最近就想要五等分，该怎么做？来！

<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title>屏幕五等分</title>
<meta name="generator" content="EverEdit" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style>
    @media (min-width: 1200px) { 
            .col-zdlg-2-5{
                float: left; width:20%; 
            }
    } 
        h2{ 
            font-family: "Microsoft Yahei"; 
            font-weight: 500; 
            line-height: 1.1;
        color:#000; 
        } 
        .col-red-border{ 
            border:1px solid red; 
        }
</style>
</head>
<body>
    <div class="container-fluid">
        <div class="rows">
            <div class="col-xs-12 col-sm-12 col-md-4 col-zdlg-2-5 col-red-border">
                <h2>
                    屏幕五等分
                </h2>
            </div>
            <div class="col-xs-12 col-sm-12 col-md-4 col-zdlg-2-5 col-red-border">
                <h2>
                    屏幕五等分
                </h2>
            </div>
            <div class="col-xs-12 col-sm-12 col-md-4 col-zdlg-2-5 col-red-border">
                <h2>
                    屏幕五等分
                </h2>
            </div>
            <div class="col-xs-12 col-sm-12 col-md-4 col-zdlg-2-5 col-red-border">
                <h2>
                    屏幕五等分
                </h2>
            </div>
            <div class="col-xs-12 col-sm-12 col-md-4 col-zdlg-2-5 col-red-border">
                <h2>
                    屏幕五等分
                </h2>
            </div>
        </div>
    </div>
</body>
</html>

当前页面是本站的「Google AMP」版。查看和发表评论请点击：完整版 »