bootstrap栅格五等分

目录

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

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

Screenshot.png

那么我最近就想要五等分,该怎么做?来!

<!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>

文章最后编辑时间为:2017-05-19 16:13:51

标签: css bootstrap

声明:本博客如无特殊说明皆为原创,转载请注明来源:bootstrap栅格五等分谢谢!

相关文章

精彩评论
  1. 法律论文 法律论文  Windows 10 x64 Edition Firefox 50.0

    支持楼主,赞赞

发表评论:

icon_question.pngicon_razz.pngicon_sad.pngicon_evil.pngicon_exclaim.pngicon_smile.pngicon_redface.pngicon_biggrin.pngicon_surprised.pngicon_eek.pngicon_confused.pngicon_cool.pngicon_lol.pngicon_mad.pngicon_twisted.pngicon_rolleyes.pngicon_wink.pngicon_idea.pngicon_arrow.pngicon_neutral.pngicon_cry.pngicon_mrgreen.png