zoukankan      html  css  js  c++  java
  • bootstrap实现pc屏幕五等分

    <!DOCTYPE html>
    <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <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="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
    <style>
    @media (min- 1200px) {
    .col-zdlg-2-5{
    float: left;
    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>

  • 相关阅读:
    Piggy-Bank (hdoj1114)
    Word Amalgamation(hdoj1113)
    Lowest Bit(hdoj1196)
    1206: B.求和
    1207: C.LU的困惑
    STL初步
    关于521(nyoj)
    first blood暴力搜索,剪枝是关键
    变态最大值(nyoj)
    烧饼(nyoj779)
  • 原文地址:https://www.cnblogs.com/herd/p/5922803.html
Copyright © 2011-2022 走看看